/* ==========================================================================
   ETute — Fresh Campus design tokens
   Single source of truth: Docs/design-mockups/DESIGN-SYSTEM.md
   Direction: Option A · Fresh Campus — flat, cyan #06b6d4 + coral #f97316,
   navy ink, Sora display + Manrope body. Evolution of ETute's sky-blue/navy brand.

   LOAD ORDER: this file is linked AFTER app.css in every host page. The `:root:root`
   map below therefore wins over app.css's legacy navy `:root:root` block by source
   order (equal specificity) — recolouring everything var-driven WITHOUT editing
   app.css's 110-var block. The remaining hard-coded navy in `.rz-*` !important rules
   is reconciled in Phase-0 Step 2 (see the app-refresh plan).
   ========================================================================== */

:root {
  /* ---- palette (DESIGN-SYSTEM §1.1) ---- */
  --canvas:#F2FBFD; --surface:#ffffff; --surface-2:#f7fcfd;
  --ink:#0B1733; --ink-soft:#33415c; --muted:#64748b; --placeholder:#94a3b8;
  --line:#e3eef2; --line-2:#eef4f6;

  --cyan:#06b6d4; --cyan-deep:#0891b2; --cyan-bright:#22d3ee;
  --cyan-wash:#ecfeff; --cyan-wash-2:#cffafe; --cyan-ring:rgba(6,182,212,.16);
  --coral:#f97316; --coral-soft:#fb923c; --coral-wash:#fff1e6;
  --navy:#03045E;
  --green:#059669; --green-deep:#047857; --green-wash:#e7f8f0;
  --amber:#d97706; --amber-ink:#92400e; --amber-wash:#fef3e2;
  --red:#e11d48;   --red-wash:#fdeaef;
  --info:#0891b2;

  /* cool-slate neutral ramp */
  --gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-200:#e2e8f0; --gray-300:#cbd5e1;
  --gray-400:#94a3b8; --gray-500:#64748b; --gray-600:#475569; --gray-700:#334155;
  --gray-800:#1e293b; --gray-900:#0f172a;

  /* ---- type (DESIGN-SYSTEM §2) ---- */
  --display:'Sora', system-ui, sans-serif;
  --body:'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'Manrope', ui-monospace, monospace;
  --fs-display:clamp(20px, calc(1.5vw + 16px), 22px);
  --fs-h2:16px; --fs-h3:15px; --fs-h4:14px; --fs-body:14px;
  --fs-ui:13.5px; --fs-sm:12.5px; --fs-xs:11.5px;

  /* ---- radius / shadow / motion (DESIGN-SYSTEM §3) ---- */
  --r:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px; --r-input:10px;
  --shadow-sm:0 2px 5px rgba(11,23,51,.05);
  --shadow:0 2px 5px rgba(11,23,51,.05),0 14px 30px rgba(11,23,51,.06);
  --shadow-lg:0 10px 24px rgba(11,23,51,.08),0 30px 60px rgba(11,23,51,.10);
  --ease:cubic-bezier(.32,.72,0,1);

  /* ---- gradients — Fresh Campus is FLAT; these two only ---- */
  --grad-warm:linear-gradient(120deg,#FFF3E8,#EAFBFD);  /* AI suggestion cards */
  --warm-line:#fbe3cc;                                   /* AI-card border */
  --grad-mark:linear-gradient(135deg,#22d3ee,#0891b2);   /* 30px logo square only */
}

/* ==========================================================================
   Brand → Radzen variable map (DESIGN-SYSTEM §11)
   `:root:root` matches app.css's specificity hack; loaded after app.css → wins.
   ========================================================================== */
:root:root {
  --rz-primary:var(--cyan);
  --rz-primary-light:var(--cyan-bright);
  --rz-primary-lighter:var(--cyan-wash);
  --rz-primary-dark:var(--cyan-deep);
  --rz-primary-darker:#0e7490;
  --rz-on-primary:#ffffff;

  --rz-secondary:var(--cyan-deep);
  --rz-secondary-light:var(--cyan);
  --rz-secondary-lighter:var(--cyan-wash);
  --rz-secondary-dark:#0e7490;
  --rz-secondary-darker:#155e75;

  --rz-info:var(--info);
  --rz-success:var(--green);
  --rz-warning:var(--amber);
  --rz-danger:var(--red);

  --rz-base-50:var(--gray-50);   --rz-base-100:var(--gray-100); --rz-base-200:var(--gray-200);
  --rz-base-300:var(--gray-300); --rz-base-400:var(--gray-400); --rz-base-500:var(--gray-500);
  --rz-base-600:var(--gray-600); --rz-base-700:var(--gray-700); --rz-base-800:var(--gray-800);
  --rz-base-900:var(--gray-900);

  --rz-text-color:var(--ink);
  --rz-text-secondary-color:var(--muted);
  --rz-text-font-family:var(--body);
  --rz-border-radius:var(--r);

  /* surfaces / chrome → light, flat */
  --rz-body-background-color:var(--canvas);
  --rz-layout-body-background-color:var(--canvas);
  --rz-base-background-color:var(--surface);
  --rz-panel-background-color:var(--surface);
  --rz-card-background-color:var(--surface);
  --rz-dialog-background-color:var(--surface);
  --rz-sidebar-background-color:var(--surface);
  --rz-header-background-color:var(--surface);
  --rz-grid-header-background-color:var(--surface-2);
  --rz-grid-header-color:var(--ink);

  /* chart series → cyan/coral/navy family */
  --rz-series-1:#06b6d4; --rz-series-2:#fb923c; --rz-series-3:#0891b2; --rz-series-4:#22d3ee;
  --rz-series-5:#f59e0b; --rz-series-6:#059669; --rz-series-7:#5b93ff; --rz-series-8:#03045e;
}

/* ==========================================================================
   Typography — Sora display + Manrope body.
   Also corrects the legacy `body { font-family:'Material Symbols Outlined' }`
   rule in app.css (icons keep their own class-level font, so this is a fix).
   ========================================================================== */
body,
.rz-text-body1, .rz-text-body2, .rz-body {
  font-family: var(--body);
}
h1, h2, h3, h4, h5, h6,
.rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6,
.rz-text-display-h1, .rz-text-display-h2, .rz-text-display-h3 {
  font-family: var(--display);
  letter-spacing: -0.01em;
}