/* =============================================================
   TOKENS — every colour, size and timing in one place.
   Retune the brand here and the whole site follows.
   ============================================================= */

:root {

  /* ---------- Brand palette ---------- */
  --sage:        #7E8F6F;   /* primary — surfaces, large shapes, icons */
  --sage-deep:   #5F6F52;   /* primary for TEXT & buttons (AA on cream) */
  --sage-dark:   #43503A;   /* footer, deep sections */
  --sage-soft:   #A8B79A;   /* dividers, decorative */
  --sage-tint:   #EAEFE4;   /* tinted card backgrounds */

  --cream:       #F7F4EE;   /* page background */
  --cream-warm:  #FAF6EF;   /* alternating section background (theme.css) */
  --sand:        #EDE6D8;   /* alternate section background */
  --sand-deep:   #E2D9C6;

  --gold:        #C9A227;   /* accent — rules, small marks, never body text */
  --gold-deep:   #8A6D12;   /* accent for TEXT (AA on cream) */
  --gold-soft:   #F0E4BC;

  --bark:        #3A322A;   /* headings */
  --ink:         #2B2B2B;   /* body text */
  --muted:       #635A50;   /* secondary text — AA on cream (5.9:1) */
  --line:        #E0D8C8;   /* hairlines */
  --white:       #FFFFFF;

  --whatsapp:    #1F7A4D;   /* darkened for AA with white text */
  --focus:       #1B5E9E;   /* high-contrast focus ring */

  /* ---------- Typography ---------- */
  --font-head: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-zh:   "Noto Sans SC", var(--font-body);

  /* Fluid scale. Body never below 17px, headings never below 20px. */
  --fs-xs:   0.875rem;                                  /* 14 — labels/legal only */
  --fs-sm:   0.9375rem;                                 /* 15 — meta */
  --fs-body: 1.0625rem;                                 /* 17 — minimum body */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-h4:   clamp(1.25rem, 1.18rem + 0.35vw, 1.4375rem);
  --fs-h3:   clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --fs-h2:   clamp(1.625rem, 1.35rem + 1.25vw, 2.5rem);
  --fs-h1:   clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  --fs-display: clamp(1.9375rem, 1.42rem + 2.6vw, 4rem);

  --lh-tight: 1.18;
  --lh-head:  1.28;
  --lh-body:  1.7;

  /* ---------- Space ---------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5rem;    --sp-11: 6.5rem;

  --section-y: clamp(3.25rem, 2rem + 5vw, 6.5rem);
  --gutter:    clamp(1.125rem, 0.6rem + 2.2vw, 2.5rem);
  --maxw:      1240px;
  --maxw-text: 65ch;

  /* ---------- Shape ---------- */
  --r-sm: 10px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* ---------- Shadow — soft and diffused, never harsh ---------- */
  --sh-1: 0 1px 2px rgba(58,50,42,.05), 0 2px 8px rgba(58,50,42,.05);
  --sh-2: 0 2px 6px rgba(58,50,42,.06), 0 10px 24px rgba(58,50,42,.07);
  --sh-3: 0 6px 16px rgba(58,50,42,.08), 0 22px 48px rgba(58,50,42,.10);
  --sh-inset-top: inset 0 1px 0 rgba(255,255,255,.55);

  /* ---------- Motion — calm, unhurried ---------- */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast:   160ms;
  --t-base:   280ms;
  --t-slow:   520ms;
  --t-reveal: 760ms;
  --stagger:  70ms;

  /* ---------- Layout chrome ---------- */
  --header-h:      64px;
  --header-h-lg:   84px;
  --header-h-sm:   62px;   /* shrunk state, desktop */
  /* True rendered height of the mobile action bar. The buttons are taller
     than their 64px min-height once icon + label are stacked, so this is
     78px, not 64px. main.js re-measures it at runtime because the bar grows
     when a translated label wraps (Malay reaches 99px on a 360px phone). */
  --actionbar-h:   78px;
  --safe-b:        env(safe-area-inset-bottom, 0px);
  --z-bar: 90; --z-header: 100; --z-menu: 110; --z-lightbox: 120;
}

@media (min-width: 1024px) {
  :root { --header-h: var(--header-h-lg); }
}