/**
 * tokens.css — Single source of truth for the cwq_theme design system.
 *
 * Distilled from the 2026 mockups (Material-3 emerald/slate palette).
 * Nothing here produces visible output on its own; everything else
 * (base.css, layout.css, components.css) consumes these variables.
 *
 * Edit a value here once and it propagates everywhere.
 */

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --brand:            #006E46;   /* logo green (canonical brand color)     */
  --brand-bright:     #10B981;   /* lighter "container" green for accents  */
  --brand-tint:       rgba(0, 110, 70, 0.10); /* 10% wash behind icons     */
  --brand-hover:      #005236;   /* darker green for button :hover         */
  --on-brand:         #FFFFFF;   /* text/icons on a green fill             */

  /* ---- Surfaces ------------------------------------------------------- */
  --bg:               #F7F9FB;   /* page background                        */
  --surface:          #FFFFFF;   /* cards, nav bar, raised panels          */
  --surface-low:      #F2F4F6;   /* subtle filled blocks, footer           */
  --surface-high:     #E6E8EA;   /* slightly stronger fill                 */
  --surface-variant:  #E0E3E5;   /* hairline borders, dividers             */

  /* ---- Text ----------------------------------------------------------- */
  --ink:              #191C1E;   /* primary text / headings                */
  --ink-muted:        #3C4A42;   /* secondary body text                    */
  --secondary:        #565E74;   /* slate — supporting copy, nav labels    */
  --tertiary:         #505F76;   /* faint meta (dates, captions)           */

  /* ---- Lines & states ------------------------------------------------- */
  --outline:          #6C7A71;
  --outline-variant:  #BBCABF;
  --error:            #BA1A1A;
  --error-container:  #FFDAD6;
  --on-error:         #FFFFFF;

  /* ---- Typography ----------------------------------------------------- */
  /* Noto Sans superfamily — universal script coverage. The base family
     covers Latin / Latin-ext (Vietnamese) / Greek / Cyrillic; each sibling
     adds a script. The browser falls per-glyph down this stack, so mixed-
     language pages render in one harmonized typeface. Add more Noto families
     (Tamil, Khmer, Georgian, Armenian, Ethiopic…) here + in the fonts library
     as new scripts appear. */
  --font-sans:
    'Noto Sans',
    'Noto Sans Arabic', 'Noto Sans Hebrew',
    'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Thai',
    'Noto Sans KR', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans TC',
    system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Type scale: size / line-height / weight (from the mockups) */
  --fs-display:      48px;  --lh-display:      56px;  --fw-display:      800;
  --fs-headline-lg:  32px;  --lh-headline-lg:  40px;  --fw-headline-lg:  700;
  --fs-headline-md:  24px;  --lh-headline-md:  32px;  --fw-headline-md:  600;
  --fs-title:        20px;  --lh-title:        28px;  --fw-title:        600;
  --fs-body-lg:      18px;  --lh-body-lg:      28px;
  --fs-body:         16px;  --lh-body:         24px;
  --fs-label:        14px;  --lh-label:        20px;  --fw-label:        500;
  --fs-caption:      12px;  --lh-caption:      16px;

  /* Mobile display/headline step-downs */
  --fs-display-m:     34px; --lh-display-m:     40px;
  --fs-headline-lg-m: 28px; --lh-headline-lg-m: 36px;

  /* ---- Layout --------------------------------------------------------- */
  --container:        1200px;
  --margin-desktop:   64px;
  --margin-mobile:    20px;
  --section-gap:      80px;
  --gutter:           24px;
  --element-gap:      16px;
  --header-h:         80px;

  /* ---- Radius --------------------------------------------------------- */
  --r:                0.25rem;
  --r-lg:             0.5rem;
  --r-xl:             0.75rem;
  --r-full:           9999px;

  /* ---- Shadows (soft, slate-tinted — matches mockup cards) ------------ */
  --shadow-sm:    0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow:       0 4px 6px -1px rgba(15, 23, 42, 0.05),
                  0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-hover: 0 10px 15px -3px rgba(15, 23, 42, 0.08),
                  0 4px 6px -2px rgba(15, 23, 42, 0.04);

  /* ---- Motion --------------------------------------------------------- */
  --transition:   150ms ease;
}