/* ============================================================
   Design tokens — Radix Colors (iris-forward, light theme)
   See plan.md → "Visual design" for rationale.
   ============================================================ */

:root {
  /* --- Mauve (natural gray, paired with iris/plum) --- */
  --mauve-1:  #fdfcfd;
  --mauve-2:  #faf9fb;
  --mauve-3:  #f3f1f4;
  --mauve-4:  #ebe9ec;
  --mauve-5:  #e3e1e6;
  --mauve-6:  #dbd9df;
  --mauve-7:  #d0cdd6;
  --mauve-8:  #bcbac4;
  --mauve-9:  #8e8c99;
  --mauve-10: #82808d;
  --mauve-11: #65636d;
  --mauve-12: #211f26;

  /* --- Iris (primary accent) --- */
  --iris-1:  #fdfdff;
  --iris-2:  #f8f8ff;
  --iris-3:  #f0f1fe;
  --iris-4:  #e6e7ff;
  --iris-5:  #dadcff;
  --iris-6:  #cbcdff;
  --iris-7:  #b8baf8;
  --iris-8:  #9b9ef0;
  --iris-9:  #5b5bd6;
  --iris-10: #5151cd;
  --iris-11: #5753c6;
  --iris-12: #272962;

  /* --- Plum (secondary accent) --- */
  --plum-1:  #fefcff;
  --plum-2:  #fdf7fd;
  --plum-3:  #fbebfb;
  --plum-4:  #f7def8;
  --plum-5:  #f2d1f3;
  --plum-6:  #e9c2eb;
  --plum-7:  #deade3;
  --plum-8:  #cf91d8;
  --plum-9:  #ab4aba;
  --plum-10: #a043b0;
  --plum-11: #953ea3;
  --plum-12: #53195d;

  /* --- Chart palette (key step only, for categorical data) --- */
  --chart-iris:   var(--iris-9);
  --chart-plum:   var(--plum-9);
  --chart-purple: #8e4ec6;
  --chart-indigo: #3e63dd;
  --chart-blue:   #0090ff;
  --chart-cyan:   #00a2c7;
  --chart-jade:   #29a383;

  /* ============================================================
     Semantic role tokens — use these in component CSS, not the raw color steps above
     ============================================================ */
  --bg-page:     var(--mauve-2);
  --bg-card:     #ffffff;
  --bg-card-hover: var(--mauve-2);
  --bg-sidebar:  var(--mauve-1);

  --border-subtle:  var(--mauve-4);
  --border-default: var(--mauve-6);
  --border-strong:  var(--mauve-8);

  --fg-default: var(--mauve-12);
  --fg-muted:   var(--mauve-11);
  --fg-subtle:  var(--mauve-10);
  --fg-inverse: #ffffff;

  --accent-bg-subtle: var(--iris-3);
  --accent-bg:        var(--iris-4);
  --accent-bg-hover:  var(--iris-5);
  --accent-border:    var(--iris-7);
  --accent-solid:     var(--iris-9);
  --accent-solid-hover: var(--iris-10);
  --accent-text:      var(--iris-11);

  --accent-2-solid:   var(--plum-9);
  --accent-2-text:    var(--plum-11);

  /* ============================================================
     Spacing / size / radius / shadow / motion
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 16px;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 2px rgba(33, 31, 38, 0.04);
  --shadow-md: 0 4px 12px rgba(33, 31, 38, 0.06);
  --shadow-lg: 0 12px 32px rgba(33, 31, 38, 0.08);
  --shadow-focus: 0 0 0 3px var(--iris-5);

  --motion-fast: 120ms cubic-bezier(0.2, 0, 0.13, 1);
  --motion-med:  200ms cubic-bezier(0.2, 0, 0.13, 1);
  --motion-slow: 320ms cubic-bezier(0.2, 0, 0.13, 1);

  /* ============================================================
     Layout sizing
     ============================================================ */
  --sidebar-w:        220px;
  --sidebar-w-narrow: 64px;   /* icon-only state */
  --grid-gap:         24px;
  --card-pad:         24px;
  --grid-cols:        4;

  /* ============================================================
     Typography
     ============================================================ */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  20px;
  --fs-xl:  28px;
  --fs-2xl: 40px;
  --fs-3xl: 56px;

  /* One-off: brand-tag size that aligns with the x-height of the brand-mark */
  --fs-display-tag: 22px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  --lh-tight:   1.15;
  --lh-default: 1.5;
  --lh-loose:   1.7;
}

/* Dark mode placeholders — same values as light for now (toggle deferred).
   When dark mode lands, define `:root.dark { ... }` here with real values. */
:root.dark {
  /* TODO: real dark scale (Radix mauveDark + irisDark). */
}