/* =========================================================================
 * Elysium — Design Tokens
 * Sourced from elysium-design-styles-repository.html and aligned with the
 * DesignPressFactory token pipeline (W3C DTCG / CSS custom properties).
 *
 * One light theme surface layer lives downstream in themes.css.
 * ===================================================================== */

:root {
  /* ── Paper / Ink (derived from the Elysium dashboard reference) ──── */
  --paper:        #f6f3ee;  /* page background, warm off-white */
  --paper-2:      #fdfbf6;  /* card surface */
  --paper-3:      #ebe6dd;  /* divider tint */
  --ink:          #1a1330;  /* deep aubergine ink (statue shadow) */
  --ink-2:        #2c2348;  /* secondary text */
  --muted:        #6f6884;  /* tertiary text */

  /* ── Brand palette ──────────────────────────────────────────────── */
  --white:        #ffffff;
  --black:        #07050f;

  /* PRIMARY — lavender / violet (the dashboard's "elevated" wordmark) */
  --violet:       #6a4dc6;  /* primary brand violet */
  --violet-deep:  #4a2fa0;  /* hover / strong */
  --lavender:     #b9a8ff;  /* sun-warmed lilac (statue glow) */
  --lilac:        #d8ccff;  /* surface tint */
  --lilac-2:      #efe9ff;  /* faint chip background */

  /* SUPPORT — the four KPI accents from the reference */
  --magenta:      #d24cff;  /* KPI "Total Projects" tile */
  --cobalt:       #4f8cff;  /* KPI "Team Members" tile */
  --chartreuse:   #c9f25a;  /* KPI "Data Processed" tile + line chart */
  --gold:         #e5c265;  /* KPI "Uptime" tile / premium accent */

  /* SECONDARY UTILITY */
  --ember:        #ff5630;
  --sage:         #7b846e;
  --sand:         #d6c4aa;
  --cyan:         #65d8ff;

  /* Brand gradient (statue halo) */
  --brand-grad:   linear-gradient(135deg, var(--lavender) 0%, var(--violet) 45%, var(--magenta) 100%);
  --brand-grad-soft: linear-gradient(135deg, var(--lilac-2) 0%, #f6efff 60%, #fff5fa 100%);

  /* ── Semantic role aliases ──────────────────────────────────────── */
  --bg:           var(--paper);
  --bg-2:         var(--paper-2);
  --surface:      rgba(255, 255, 255, 0.78);
  --surface-2:    rgba(26, 19, 48, 0.04);
  --border:       rgba(26, 19, 48, 0.10);
  --border-2:     rgba(26, 19, 48, 0.06);
  --fg:           var(--ink);
  --fg-2:         var(--ink-2);
  --fg-muted:     var(--muted);
  --bg-solid:     var(--paper);
  --accent:       var(--violet);      /* primary action */
  --accent-2:     var(--magenta);     /* secondary highlight */
  --accent-3:     var(--chartreuse);  /* data / success */
  --warn:         var(--ember);

  /* ── Typography
   * The dashboard wordmark uses a humanist serif (Elysium) with an italic
   * accent ("elevated."). We map this to Cormorant + Fraunces for fallback
   * and Host Grotesk for body. La Cerchia stays as the primary serif token
   * for systems that have it. */
  --sans:   "Host Grotesk", "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:  "La Cerchia", "Fraunces", "Cormorant Garamond", "Times New Roman", serif;
  --serif-display: "Fraunces", "Cormorant Garamond", "La Cerchia", serif;
  --mono:   "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-12:  0.75rem;
  --fs-14:  0.875rem;
  --fs-16:  1rem;
  --fs-18:  1.125rem;
  --fs-20:  1.25rem;
  --fs-24:  1.5rem;
  --fs-32:  2rem;
  --fs-40:  2.5rem;
  --fs-56:  3.5rem;
  --fs-72:  4.5rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-loose:   1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.18em;

  /* ── Spacing scale (4px base) ───────────────────────────────────── */
  --s-1:   0.25rem;
  --s-2:   0.5rem;
  --s-3:   0.75rem;
  --s-4:   1rem;
  --s-5:   1.5rem;
  --s-6:   2rem;
  --s-7:   3rem;
  --s-8:   4rem;
  --s-9:   6rem;
  --s-10:  8rem;

  /* ── Radii / Shadows / Motion ───────────────────────────────────── */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-4: 22px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(16, 21, 28, 0.06), 0 1px 1px rgba(16, 21, 28, 0.04);
  --shadow-2: 0 8px 24px rgba(16, 21, 28, 0.10);
  --shadow-3: 0 24px 64px rgba(16, 21, 28, 0.18);

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;

  /* ── Layout ─────────────────────────────────────────────────────── */
  --container:  min(1240px, 92vw);
  --gutter:     var(--s-5);
  --grid-12:    repeat(12, minmax(0, 1fr));
  --grid-6:     repeat(6, minmax(0, 1fr));

  /* ── Wireframe scaffolding ──────────────────────────────────────── */
  --wf-line:        rgba(26, 19, 48, 0.18);
  --wf-line-strong: rgba(26, 19, 48, 0.42);
  --wf-fill:        rgba(26, 19, 48, 0.03);
  --wf-fill-2:      rgba(26, 19, 48, 0.07);
  --wf-label:       rgba(26, 19, 48, 0.55);
  --wf-tag-bg:      rgba(106, 77, 198, 0.12);
  --wf-tag-fg:      var(--violet-deep);
}