/* ============================================================
   Design tokens — Dr. Jacqueline Yun
   Scholar-Healer brand: editorial serif + clean sans, OKLCH palette
   ============================================================ */

:root {
  /* ---------- Color (OKLCH, perceptually uniform) ---------- */
  /* Earthy warm palette — cream + teal + wheat + dusty rose. From the client's reference image. */
  /* Surfaces — warm blush cream, NEVER pure white */
  --bg:           oklch(94% 0.014 60);      /* warm blush cream */
  --bg-elev:     oklch(97% 0.010 60);      /* near-white card */
  --bg-sunk:     oklch(89% 0.020 60);      /* recessed band */
  --bg-deep:     oklch(30% 0.040 200);     /* inverse: deep teal (was deep ink) */
  --bg-deep-2:   oklch(36% 0.045 200);     /* inverse elev */

  /* Ink — warm brown-leaning, NOT cool */
  --ink:         oklch(24% 0.028 55);
  --ink-soft:    oklch(42% 0.024 55);
  --ink-mute:    oklch(58% 0.018 55);
  --ink-faint:   oklch(74% 0.014 55);
  --ink-on-deep: oklch(95% 0.012 60);
  --ink-on-deep-soft: oklch(76% 0.022 60);

  /* Accents — teal (primary) + wheat tan (secondary) + dusty rose (tertiary)
     Variable names kept (--sage, --clay) so all downstream CSS picks up the reskin automatically */
  --sage:        oklch(48% 0.060 200);     /* deep teal — primary accent */
  --sage-deep:   oklch(38% 0.060 200);     /* darker teal */
  --sage-soft:   oklch(82% 0.045 200);     /* light teal */
  --sage-wash:   oklch(92% 0.025 200);     /* teal wash for backgrounds */
  --clay:        oklch(68% 0.075 70);      /* wheat / warm tan — secondary */
  --clay-deep:   oklch(54% 0.080 70);      /* deeper tan */
  --clay-soft:   oklch(88% 0.040 70);      /* light tan */
  --rose:        oklch(80% 0.045 25);      /* dusty rose — tertiary accent */
  --rose-deep:   oklch(64% 0.060 25);      /* darker rose */
  --rose-soft:   oklch(92% 0.025 25);      /* pale rose wash */

  /* New tokens added per Brand Book v1 (2026-05-22) */
  --surface-paper: oklch(91% 0.018 65);    /* warmer paper between bg and bg-sunk */
  --inverse-deep:  oklch(24% 0.034 200);   /* darkest teal — deepest band */
  --line-on-deep:  oklch(42% 0.030 200);   /* hairlines on deep teal surface */

  /* Functional */
  --line:        oklch(85% 0.020 60);
  --line-strong: oklch(74% 0.025 60);
  --success:     oklch(55% 0.12 165);
  --warn:        oklch(72% 0.14 75);

  /* ---------- SEMANTIC ALIASES (Brand Book v1 naming) ----------
     These point to the existing tokens above. Use either set. Brand-book
     components that reference --surface / --primary / --inverse will pick
     up the correct values via these aliases. Existing components keep
     using --bg / --sage / --bg-deep without breakage. */
  --surface:       var(--bg);
  --surface-elev:  var(--bg-elev);
  --surface-deep:  var(--bg-sunk);
  --inverse:       var(--bg-deep);
  --inverse-elev:  var(--bg-deep-2);
  --primary:       var(--sage);
  --primary-deep:  var(--sage-deep);
  --primary-soft:  var(--sage-soft);
  --primary-wash:  var(--sage-wash);
  --secondary:      var(--clay);
  --secondary-deep: var(--clay-deep);
  --secondary-soft: var(--clay-soft);
  --tertiary:       var(--rose);
  --tertiary-deep:  var(--rose-deep);
  --tertiary-soft:  var(--rose-soft);

  /* ---------- Type ---------- */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Apple Garamond', 'Baskerville', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-sc:      'Noto Serif SC', 'Songti SC', 'PingFang SC', serif;

  /* Brand-book aliases */
  --display: var(--font-display);
  --body:    var(--font-body);
  --mono:    var(--font-mono);
  --sc:      var(--font-sc);

  /* Modular scale, mobile-first, ratio 1.22 */
  --fs-eyebrow:  0.6875rem;  /* 11px */
  --fs-xs:       0.75rem;    /* 12px */
  --fs-sm:       0.875rem;   /* 14px */
  --fs-base:     1rem;       /* 16px */
  --fs-lg:       1.125rem;   /* 18px */
  --fs-xl:       1.375rem;   /* 22px */
  --fs-2xl:      1.75rem;    /* 28px */
  --fs-3xl:      2.25rem;    /* 36px */
  --fs-4xl:      3rem;       /* 48px */
  --fs-5xl:      4.25rem;    /* 68px */
  --fs-6xl:      5.5rem;     /* 88px */

  --lh-tight:    1.06;
  --lh-snug:     1.18;
  --lh-normal:   1.45;
  --lh-relaxed:  1.65;

  --tracking-tight:  -0.022em;
  --tracking-snug:   -0.012em;
  --tracking-normal: 0;
  --tracking-eyebrow: 0.14em;
  --tracking-label:   0.06em;

  /* ---------- Space (8px grid, fluid hops) ---------- */
  --s-1:  0.25rem;   /* 4 */
  --s-2:  0.5rem;    /* 8 */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 */
  --s-5:  1.5rem;    /* 24 */
  --s-6:  2rem;      /* 32 */
  --s-7:  3rem;      /* 48 */
  --s-8:  4rem;      /* 64 */
  --s-9:  6rem;      /* 96 */
  --s-10: 8rem;      /* 128 */

  /* Layout */
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --max-w-prose: 64ch;
  --max-w-content: 1240px;

  /* ---------- Radius ---------- */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-4: 22px;
  --r-pill: 999px;

  /* ---------- Shadow (warm, soft) ---------- */
  --shadow-1: 0 1px 2px oklch(22% 0.02 270 / 0.04), 0 1px 3px oklch(22% 0.02 270 / 0.06);
  --shadow-2: 0 4px 12px oklch(22% 0.02 270 / 0.06), 0 1px 3px oklch(22% 0.02 270 / 0.05);
  --shadow-3: 0 14px 38px oklch(22% 0.02 270 / 0.10), 0 4px 10px oklch(22% 0.02 270 / 0.06);
  --shadow-glow: 0 0 0 1px oklch(48% 0.085 165 / 0.12), 0 8px 28px oklch(48% 0.085 165 / 0.18);

  /* ---------- Motion ---------- */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);     /* ease-out-quart */
  --ease-soft:   cubic-bezier(0.16, 1, 0.3, 1);      /* ease-out-quint */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-4: 680ms;

  /* ---------- Type effects ---------- */
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0.01ms;
    --dur-2: 0.01ms;
    --dur-3: 0.01ms;
    --dur-4: 0.01ms;
  }
}

/* Reduced-motion compatible — fluid type up scale */
@media (min-width: 640px) {
  :root {
    --fs-3xl: 2.75rem;
    --fs-4xl: 3.75rem;
    --fs-5xl: 5.5rem;
    --fs-6xl: 7rem;
  }
}

@media (min-width: 960px) {
  :root {
    --fs-3xl: 3rem;
    --fs-4xl: 4.5rem;
    --fs-5xl: 6.5rem;
    --fs-6xl: 8.5rem;
  }
}