/*
 * tokens.css v1.2.0
 *
 * v1.2.0 — §3.95: added `color-scheme: light` on :root to pin the page light
 *          (the portal has no dark mode); prevents UA-rendered controls from
 *          flipping dark on a device set to dark mode. No token values changed.
 *
 * LORE Search Portal — Design System Foundation
 *
 * Source of truth: LORE_Guidelines V1.pdf (brand book)
 * Drive folder: searchportal brand assets / Design Production Files / 01_Guidelines
 *
 * All hex values match the brand book V1. Off-brand hex values encountered
 * in the legacy homeid-child/style.css (e.g. #edede6 instead of #efefe6
 * for Linen, #4e0103 dark cabernet, #1e5a5e off-spec teal) are NOT carried
 * forward. See DECISIONS.md ADR-012 for the rationale.
 *
 * Font weights: Larken and Articulat are deployed in Regular only at present.
 * Medium and Bold variants are pending license purchase (BACKLOG §3.1). Until
 * purchased, browsers synthesize bolder weights from Regular for these two
 * families. Inter — the brand-sanctioned free fallback for Articulat — does
 * carry true Regular/Medium/Bold weights and will render correctly when used.
 *
 * Letter-spacing values map directly to the brand book's specified tracking:
 * tracking 50 → 0.05em (headers/footers), tracking 100 → 0.10em (captions).
 */

:root {
  /* ─── Color scheme (§3.95) ──────────────────────────────────────────── */
  /* No dark mode: pin the whole page light so UA-rendered controls (form
     controls, scrollbars, date/select pickers, embedded widgets) don't flip
     dark on a device set to dark mode. */
  color-scheme: light;

  /* ─── Primary brand colors ──────────────────────────────────────────── */
  --color-scarlet:        #e7390d;
  --color-cabernet:       #500000;
  --color-linen:          #efefe6;
  --color-sand:           #dac9aa;

  /* ─── Secondary brand colors ────────────────────────────────────────── */
  --color-harbor-blue:    #1a5b60;
  --color-bay-mist:       #c1ece3;

  /* ─── Neutrals (UI-only, non-brand) ─────────────────────────────────── */
  --color-text:           #282828;
  --color-text-muted:     #696969;
  --color-text-disabled:  #7a7a7a;
  --color-border:         #dedede;
  --color-border-soft:    #ececec;
  --color-surface-muted:  #f7f7f7;
  --color-white:          #ffffff;
  --color-black:          #000000;

  /* ─── Typography: families ──────────────────────────────────────────── */
  --font-display:  "Larken", Georgia, serif;
  --font-body:     "Articulat", "Inter", system-ui, sans-serif;

  /* ─── Typography: sizes (web-scaled from brand book) ────────────────── */
  --fs-xs:     12px;   /* captions */
  --fs-sm:     14px;   /* small body */
  --fs-base:   16px;   /* body */
  --fs-md:     18px;
  --fs-lg:     20px;
  --fs-xl:     22px;   /* headers / footers per brand */
  --fs-2xl:    24px;
  --fs-3xl:    32px;   /* h1 */

  /* ─── Typography: line heights ──────────────────────────────────────── */
  --lh-tight:    1.2;
  --lh-snug:     1.4;
  --lh-normal:   1.6;

  /* ─── Typography: weights ───────────────────────────────────────────── */
  --fw-regular:  400;
  --fw-medium:   500;  /* synthesized for Larken/Articulat until licensed */
  --fw-bold:     700;  /* synthesized for Larken/Articulat until licensed */

  /* ─── Typography: letter-spacing (brand tracking) ───────────────────── */
  --ls-tight:    0.05em;   /* headers / footers — brand tracking 50 */
  --ls-loose:    0.10em;   /* captions — brand tracking 100 */

  /* ─── Spacing (4/8-pt scale) ────────────────────────────────────────── */
  --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-sm:      4px;
  --radius-md:     10px;
  --radius-lg:     12px;
  --radius-pill:   48px;
  --radius-round:  50%;

  /* ─── Shadows ───────────────────────────────────────────────────────── */
  --shadow-card:   0 40px 120px 0 rgba(0, 0, 0, 0.13);
  --shadow-popup:  0 2px 20px 0 rgba(0, 0, 0, 0.07);
  --shadow-login:  0 0 10px 0 rgba(51, 51, 51, 0.1);

  /* ─── Breakpoints (mobile-first; values are min-widths) ─────────────── */
  --bp-sm:     576px;   /* large phone landscape */
  --bp-md:     768px;   /* iPad portrait */
  --bp-lg:     992px;   /* iPad landscape, small desktop */
  --bp-xl:    1200px;   /* desktop; hamburger threshold */
  --bp-xxl:   1400px;   /* large desktop */
}