/* ============================================================
   SC WOOD — Design Tokens
   Committed wood-brown identity. Deep espresso carries hero/nav/
   footer; surfaces stay low-chroma off-white. OKLCH throughout.
   ============================================================ */

:root {
  /* ---- Brand: wood browns (the material IS the brand) ---- */
  --espresso:      oklch(0.265 0.034 58);   /* hero / footer drench, nav */
  --espresso-deep: oklch(0.205 0.030 56);   /* deepest panels, overlays */
  --walnut:        oklch(0.40  0.052 54);   /* secondary surface / btn */
  --walnut-soft:   oklch(0.50  0.050 56);   /* hover on walnut */

  /* ---- Accent: brass / amber (drives primary CTAs) ---- */
  --amber:         oklch(0.71  0.135 67);
  --amber-strong:  oklch(0.66  0.142 62);   /* hover */
  --amber-tint:    oklch(0.93  0.045 75);   /* soft amber wash */

  /* ---- Surfaces (warm off-white, chroma kept very low) ---- */
  --bg:            oklch(0.975 0.006 75);   /* page */
  --surface:       oklch(0.995 0.003 80);   /* cards / panels */
  --cream:         oklch(0.952 0.011 73);   /* alternating sections */
  --sand-line:     oklch(0.90  0.012 72);   /* hairline borders */
  --sand-line-2:   oklch(0.85  0.014 70);   /* stronger borders */

  /* ---- Ink (text) ---- */
  --ink:           oklch(0.235 0.014 58);   /* body & headings */
  --ink-soft:      oklch(0.345 0.016 56);   /* secondary text */
  --muted:         oklch(0.455 0.018 56);   /* meta — verified >=4.5:1 on surface */

  /* ---- On-dark text (over espresso) ---- */
  --on-dark:       oklch(0.975 0.006 80);
  --on-dark-soft:  oklch(0.86  0.014 72);
  --on-dark-muted: oklch(0.74  0.016 70);

  /* ---- Functional ---- */
  --ok:    oklch(0.58 0.11 150);
  --ok-bg: oklch(0.95 0.04 150);
  --warn:  oklch(0.62 0.13 65);
  --err:   oklch(0.55 0.17 28);
  --err-bg:oklch(0.95 0.04 28);
  --focus: oklch(0.62 0.13 235);            /* visible focus ring (blue, distinct from brand) */

  /* ---- Typography ---- */
  /* Display: Maitree — Thai+Latin serif (Cadson Demak), heritage & craft voice.
     Body/UI: Anuphan — humanist sans from the same foundry; pairs on the serif×sans contrast axis. */
  --font-display: "Maitree", Georgia, "Times New Roman", serif;
  --font-body: "Anuphan", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-50: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --fs-100: clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem);
  --fs-200: clamp(1rem, 0.97rem + 0.16vw, 1.1rem);
  --fs-300: clamp(1.15rem, 1.08rem + 0.35vw, 1.4rem);
  --fs-400: clamp(1.4rem, 1.25rem + 0.7vw, 1.9rem);
  --fs-500: clamp(1.85rem, 1.55rem + 1.4vw, 2.7rem);
  --fs-600: clamp(2.3rem, 1.8rem + 2.4vw, 3.6rem);
  --fs-700: clamp(2.7rem, 2.0rem + 3.3vw, 4.6rem);   /* hero — max ~74px, under ceiling */

  --lh-tight: 1.12;
  --lh-snug: 1.28;
  --lh-body: 1.65;
  --measure: 68ch;

  /* ---- Spacing scale (rhythm, not uniform) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --section-y: clamp(3.5rem, 2.5rem + 4.5vw, 7rem);
  --gutter: clamp(1.1rem, 0.6rem + 2.4vw, 2.5rem);
  --maxw: 1240px;
  --maxw-narrow: 760px;

  /* Header height (min-height 74 + padding-block 2×sp-2) — drives sticky offsets + anchor scroll-margin */
  --header-h: 90px;
  --sticky-top: calc(var(--header-h) + 6px);

  /* ---- Radius ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Shadows (warm-tinted, layered) ---- */
  --sh-1: 0 1px 2px oklch(0.27 0.03 58 / 0.06), 0 1px 1px oklch(0.27 0.03 58 / 0.04);
  --sh-2: 0 2px 6px oklch(0.27 0.03 58 / 0.07), 0 6px 18px oklch(0.27 0.03 58 / 0.08);
  --sh-3: 0 8px 24px oklch(0.25 0.03 58 / 0.12), 0 24px 56px oklch(0.22 0.03 58 / 0.12);
  --sh-amber: 0 8px 24px oklch(0.66 0.14 62 / 0.30);

  /* ---- Motion ---- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-mid: 260ms;
  --dur-slow: 520ms;

  /* ---- Z-index (semantic) ---- */
  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-drawer-backdrop: 900;
  --z-drawer: 1000;
  --z-modal-backdrop: 1100;
  --z-modal: 1200;
  --z-toast: 1300;
  --z-tooltip: 1400;
}