/* ─────────────────────────────────────────────────────────────
   Esha Patel — Design Tokens v3
   Philosophy: Warm periwinkle brand · Terracotta + Sage accents
   Reserved yet approachable · Sophisticated yet fun
   ──────────────────────────────────────────────────────────── */

:root {
  /* ── Brand · Dusty Periwinkle ──────────────────────────────
     Shifted from electric indigo → a muted, warm periwinkle.
     Still distinctive, reads 'considered' not 'startup'.      */
  --indigo-50:  oklch(96.5% 0.022 272);
  --indigo-100: oklch(93%   0.045 272);
  --indigo-200: oklch(87%   0.085 272);
  --indigo-400: oklch(71%   0.140 272);
  --indigo-500: oklch(61%   0.160 272);
  --indigo-600: oklch(53%   0.165 272);
  --indigo-700: oklch(44%   0.150 272);

  /* ── Ink · Warm Neutrals ───────────────────────────────────
     Previous --ink-900 was rgb(30,27,75) — a dark indigo, not
     a true black. These are warm-tinted near-blacks.          */
  --ink-900: oklch(19%  0.014 265);
  --ink-700: oklch(35%  0.012 265);
  --ink-500: oklch(54%  0.009 265);
  --ink-400: oklch(67%  0.007 265);
  --ink-300: oklch(82%  0.005 265);

  /* ── Paper & Surfaces · Warm Cream ────────────────────────  */
  --paper:     oklch(98.5% 0.007 82);
  --surface-0: oklch(100%  0     0);
  --surface-1: oklch(97.5% 0.006 82);
  --surface-2: oklch(94%   0.009 78);
  --rule:      oklch(89%   0.007 78);
  --rule-soft: oklch(92%   0.007 78);

  /* ── Accents · Two voices, same chroma family ──────────────
     Terracotta (warm, approachable) + Sage (calm, zen).
     All muted — no neons. Saturation is earned, not default.  */
  --accent-orange:  oklch(62%  0.130 36);   /* terracotta — primary warm accent */
  --accent-crimson: oklch(50%  0.175 16);   /* deep rose — for drama */
  --accent-green:   oklch(60%  0.110 155);  /* sage — secondary calm accent */
  --accent-purple:  oklch(52%  0.185 305);  /* muted mauve — occasional flourish */
  --accent-amber:   oklch(73%  0.115 72);   /* warm honey */

  /* Tint surfaces — used for chip/tag backgrounds */
  --accent-lilac:   oklch(94%  0.030 272);
  --accent-cream:   oklch(96%  0.038 82);
  --accent-rose:    oklch(95%  0.025 8);
  --accent-blue:    oklch(95%  0.025 240);
  --accent-yellow:  oklch(97%  0.035 90);

  /* Brand alpha tints */
  --indigo-tint-05: oklch(61% 0.160 272 / 0.05);
  --indigo-tint-10: oklch(61% 0.160 272 / 0.10);
  --indigo-tint-20: oklch(61% 0.160 272 / 0.20);

  /* ── Typography ──────────────────────────────────────────── */
  --font-sans:    "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:   "Instrument Serif", Georgia, serif;
  --font-mono:    "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale */
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  clamp(32px, 3.2vw + 0.5rem, 48px);
  --fs-4xl:  clamp(44px, 5vw, 64px);
  --fs-hero: clamp(56px, 9vw, 120px);

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug:  1.20;
  --lh-base:  1.55;
  --lh-loose: 1.72;

  /* Tracking */
  --tracking-hero:  -0.025em;
  --tracking-tight: -0.015em;
  --tracking-wide:   0.08em;
  --tracking-meta:   0.18em;

  /* ── Spacing · 8-point scale ─────────────────────────────── */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  /* ── Radii ───────────────────────────────────────────────── */
  --r-1:   4px;
  --r-2:   8px;
  --r-3:  12px;
  --r-4:  16px;
  --r-5:  24px;
  --r-6:  32px;
  --r-7:  40px;
  --r-pill: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:     0 1px 3px oklch(0% 0 0 / 0.04);
  --shadow-md:     0 4px 14px oklch(0% 0 0 / 0.06);
  --shadow-lg:     0 20px 50px oklch(0% 0 0 / 0.06);
  --shadow-xl:     0 25px 50px -12px oklch(0% 0 0 / 0.22);
  --shadow-glass:  0 8px 32px oklch(0% 0 0 / 0.05);
  --shadow-indigo: 0 8px 10px -6px oklch(61% 0.160 272 / 0.22),
                   0 20px 25px -5px oklch(61% 0.160 272 / 0.18);

  /* ── Layout ──────────────────────────────────────────────── */
  --container:        1232px;
  --container-narrow:  960px;
  --container-wide:   1440px;
  --gutter: clamp(20px, 4vw, 40px);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease:     cubic-bezier(0.20, 0.70, 0.20, 1);
  --ease-out: cubic-bezier(0.16, 1.00, 0.30, 1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 480ms;
}

/* ── Dark Mode ───────────────────────────────────────────────
   Applied via [data-theme="dark"] on <html>.
   Token swap only — all components use tokens, so they adapt
   automatically. Exceptions patched in app.css.               */
[data-theme="dark"] {
  --paper:     oklch(13%  0.018 265);
  --surface-0: oklch(17%  0.016 265);
  --surface-1: oklch(21%  0.014 265);
  --surface-2: oklch(25%  0.012 265);
  --rule:      oklch(31%  0.010 265);
  --rule-soft: oklch(28%  0.008 265);

  --ink-900: oklch(97%  0.005 82);
  --ink-700: oklch(84%  0.008 82);
  --ink-500: oklch(60%  0.007 265);
  --ink-400: oklch(44%  0.008 265);
  --ink-300: oklch(30%  0.010 265);

  /* Brand lightens in dark mode for contrast */
  --indigo-50:  oklch(22%  0.050 272);
  --indigo-100: oklch(26%  0.080 272);
  --indigo-200: oklch(32%  0.105 272);
  --indigo-400: oklch(64%  0.145 272);
  --indigo-600: oklch(70%  0.155 272);
  --indigo-700: oklch(78%  0.140 272);

  /* Tint surfaces — dark versions */
  --accent-lilac:  oklch(24%  0.06 272);
  --accent-cream:  oklch(26%  0.05 82);
  --accent-rose:   oklch(25%  0.05 8);
  --accent-blue:   oklch(25%  0.05 240);
  --accent-yellow: oklch(26%  0.05 90);

  --shadow-sm:     0 1px 3px oklch(0% 0 0 / 0.20);
  --shadow-md:     0 4px 14px oklch(0% 0 0 / 0.28);
  --shadow-lg:     0 20px 50px oklch(0% 0 0 / 0.35);
  --shadow-xl:     0 25px 50px -12px oklch(0% 0 0 / 0.50);
  --shadow-indigo: 0 8px 10px -6px oklch(61% 0.160 272 / 0.35),
                   0 20px 25px -5px oklch(61% 0.160 272 / 0.28);
}