/**
 * dtp-tokens.css — DTP design-system token layer for the global (non-VRS) chrome.
 * ==============================================================================
 * LOAD SITES — two, both explicit. This file is NOT global-by-default:
 *   1. module/center/layout/centerHeader.php:35 — the login page only
 *      (center/index/index), gated on controller=index + action=index (OS #101 รอบ 3).
 *   2. module/vrs/layout/vrsHeader.php — EVERY vrs page, emitted immediately before
 *      vrs-tokens.css (OS #118-B). vrs no longer carries its own copy of the palette:
 *      it inherits these tokens from :root and declares only its 23 vrs-only ones on
 *      the `.vrs-dtp` wrapper.
 * Before adding a third load site, re-check that page's chrome — the tokens sit on
 * :root here, so any bare element rule a consumer sheet adds would bleed module-wide.
 * That is exactly why vrs keeps its base type layer (`.vrs-dtp h1`–`h4`, `p`, …)
 * scoped to the wrapper instead of moving it here alongside the tokens.
 *
 * Values are copied VERBATIM from docs/design-tuning/design-system/colors_and_type.css.
 * No gradients, no dark-mode block, by brand rule.
 *
 * ONE DECLARED EXCEPTION — `--fg-strong: #1a1a1a` (OS #117 item 2.0) is NOT in
 * colors_and_type.css; it is invented here. It is a *proposal* for navbar grounds too
 * pale for --fg to clear WCAG AA (the #D97706 of `support`: 4.38 with --fg, 5.46 with
 * this) and it is STILL AWAITING THE USER'S DECISION. Do not add it to
 * colors_and_type.css yourself — that file is the user's call. When it is approved and
 * moved there, drop it from PENDING_TOKENS in
 * tests/Unit/ThemeResolverForegroundTest.php, which fails until this exception is
 * either honoured or retired, so this note cannot rot silently.
 * Every other hex in this file is still verbatim from the design system.
 *
 * CANONICAL: this is the DTP token layer for the app — modules other than `vrs`
 * should load this file, not reach into /vrs/css/ for tokens.
 *
 * DUPLICATION — CLOSED (OS #118-B; the job OS #114 RV16 was holding). vrs-tokens.css
 * used to redeclare 53 of these token names under `.vrs-dtp`; it was split so that the
 * tokens come from here and only its base type layer + 23 vrs-only tokens stay scoped.
 * INVARIANT NOW: the two files must declare DISJOINT sets of custom properties —
 * the overlap is 0 and must stay 0. Do not copy a token back into vrs-tokens.css to
 * make it "local"; point the consumer at this file instead, or the drift this closed
 * comes straight back (there is no rule that would keep two copies in step).
 * Enforced by tests/Unit/VrsTokenSingleSourceTest.php — overlap = 0, every token here
 * still verbatim from colors_and_type.css, and vrsHeader.php loading this file first.
 * Not duplicated: the @font-face rules below point at ../../vrs/fonts/, where the
 * webfont files live today — a path dependency on /vrs/, not a second copy. On vrs
 * pages vrs-tokens.css declares the same three faces with byte-identical descriptors
 * and, being later in source order, wins — so these three are never the selected face
 * there and never fetched, whatever URL their src happens to resolve to.
 *
 * Fonts: self-hosted, reusing the faces already shipped in vrs/fonts/ (no Google
 * Fonts CDN — that pattern caused an 18s LCP in searchAlpine). Only two families
 * are declared: Source Sans 3 (latin + latin-ext) and Noto Sans Thai (brand
 * variable font). Cormorant Garamond is deliberately NOT loaded — it has no Thai
 * glyphs and this page is almost entirely Thai, so a serif display face here would
 * only ever fall back.
 */

/* Source Sans 3 — UI sans (variable weight 300-700) */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../../vrs/fonts/source-sans-3-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../../vrs/fonts/source-sans-3-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Brand-provided Thai face (variable, weight 100-900, width 62.5-100) */
@font-face {
  font-family: 'Noto Sans Thai';
  src: url('../../vrs/fonts/NotoSansThai-VariableFont_wdth_wght.ttf') format('truetype-variations'),
       url('../../vrs/fonts/NotoSansThai-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ───────────── Font stacks ─────────────
     Two stacks so typography can be flipped off from the console for an
     A/B screenshot (the DTP faces vs. plain system UI):
       const r = document.documentElement, s = getComputedStyle(r);
       r.style.setProperty('--dtp-font-ui', s.getPropertyValue('--dtp-font-system'));
     …and back:  r.style.removeProperty('--dtp-font-ui');
     Every font declaration in center-index-index.css goes through
     var(--dtp-font-ui) — no family is hardcoded there. */
  --dtp-font-ui:     'Source Sans 3', 'Noto Sans Thai', system-ui, -apple-system, sans-serif;
  --dtp-font-system: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ───────────── Brand (from DTP logo) ───────────── */
  --brand-crimson: #B7261C;      /* seal / logo border */
  --brand-crimson-deep: #7F1A13; /* inner shadow on logo */

  /* ───────────── Surfaces ───────────── */
  --bg:          #faf9f6;   /* page / paper */
  --bg-card:     #ffffff;   /* cards, panels */
  --bg-section:  #f3f1ec;   /* subtle recessed block */

  /* ───────────── Text (neutrals) ───────────── */
  --fg:         #2c2c2c;    /* body */
  --fg-strong:  #1a1a1a;    /* on a pale accent where --fg misses WCAG AA
                               (e.g. the #D97706 orange of `support`: 4.38 vs 5.46) */
  --fg-muted:   #8a8478;    /* labels, meta */
  --fg-light:   #b5ae9e;    /* ghost text, counts */
  --fg-inverse: #ffffff;    /* on accent */

  /* ───────────── Rules / borders ───────────── */
  --border:       #e2dfd8;
  --border-light: #ece9e2;

  /* ───────────── Accent (scholarly blue) ───────────── */
  --accent:        #1a5276;  /* primary accent / headings */
  --accent-light:  #2980b9;  /* links, hover */
  --accent-tint:   #eaf2f8;  /* selected word bg */

  /* ───────────── Semantic palette ───────────── */
  --green:    #1e8449;
  --red:      #c0392b;

  /* ───────────── Type scale (rem) ───────────── */
  --fs-xs:   0.72rem;   /* meta, tiny labels */
  --fs-sm:   0.82rem;   /* secondary UI */
  --fs-base: 0.95rem;   /* body */
  --fs-md:   1rem;
  --fs-lg:   1.15rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;

  /* ───────────── Letter-spacing ───────────── */
  --ls-tight:  -0.02em; /* display headings */
  --ls-normal: 0;
  --ls-wide:   0.03em;  /* subtitles */
  --ls-label:  0.08em;  /* uppercase labels */
  --ls-caps:   0.1em;   /* stat labels */

  /* ───────────── Line heights ───────────── */
  --lh-tight:  1.15;    /* display */
  --lh-snug:   1.4;
  --lh-body:   1.6;
  --lh-text:   1.8;     /* Pali / reading text */

  /* ───────────── Spacing ───────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ───────────── Radii ───────────── */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ───────────── Shadows (soft, print-ish) ───────────── */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.04);
  --shadow-md:    0 1px 4px rgba(0,0,0,0.05);
  --shadow-hover: 0 2px 8px rgba(26,82,118,0.10);    /* accent-tinted */
  --shadow-focus: 0 0 0 2px rgba(41,128,185,0.12);
  /* Derived from --shadow-focus, not a new colour: 183,38,28 is
     --brand-crimson #B7261C in decimal, and the 0.12 alpha is deliberately
     the same as --shadow-focus — one ring weight, two hues. Blue stays the
     default ring; this one is only for the crimson primary button. */
  --shadow-focus-crimson: 0 0 0 2px rgba(183,38,28,0.12);

  /* ───────────── Motion ───────────── */
  --dur-fast:  0.15s;
  --dur-mid:   0.2s;
  --ease:      ease;
}