/* ============================================================================
 * sol pbc — web design tokens
 * The single consumable embodiment of the design-token SOT.
 *
 *   SOT (prose, authoritative):   vpx/design-system/tokens.md
 *   Identity source (CMO owns):   cmo/brand/sol/index.md
 *   Consumption contract:         vpx/design-system/web/index.md
 *   Surface tiers (who uses what): vpx/design-system/surface-tiers.md
 *
 * Variable names mirror the reference implementation (services.solstone.app
 * `portal.css`) so surfaces adopt with minimal churn. Derivation is ONE-WAY:
 * do not edit a value here to "fix" a surface — fix it in tokens.md (usage,
 * VPX) or via a CMO request (identity), then re-derive. A surface that
 * hard-codes brand values instead of importing this file is non-compliant
 * (web/index.md § no inline brand values).
 *
 * THE CONTRAST LAW (the org's most re-found a11y defect — tokens.md):
 *   --orange (#E8923A) is DECORATION ONLY. It fails WCAG 3:1 against white
 *   (2.44:1), cream-bright (2.38:1), and cream (2.21:1) — it may fill shapes
 *   and sit behind dark ink, never BE text/links on a light surface.
 *   --orange-ink (#B06A1A) is the accessible orange — ALL orange text and
 *   links on light surfaces use it (4.27:1 / 4.16:1 / 3.86:1 ✓).
 *   Primary buttons are dark-ink-on-orange (#1A1A1A on #E8923A → 7.13:1 ✓),
 *   never white-on-orange.
 * ========================================================================== */

/* ── brand font loader — ships WITH the tokens ───────────────────────────────
 * The @font-face lives HERE, not in a surface's own stylesheet, so that loading
 * tokens.css guarantees BOTH the --font-display variable AND the Comfortaa file
 * it names. This closes the 2026-06-24 solstone.app/releases regression class:
 * a surface had loaded the variable's *consumer* (base.css) without its *loader*,
 * so --font-display fell back to the UA serif. CONVENTION: every vendoring
 * surface ships `Comfortaa-Variable.woff2` in the SAME directory as tokens.css,
 * so this relative src resolves everywhere with one byte-identical declaration.
 * Inter is intentionally NOT loaded here — it is system-fallback-acceptable
 * (see --font-body); surfaces that self-host Inter (e.g. the services portal)
 * keep their own @font-face. */
@font-face {
  font-family: 'Comfortaa';
  src: url('Comfortaa-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* ── brand identity — CMO owns (cmo/brand/sol/index.md) ───────────────── */
  --gold:        #FFCF33; /* sun rays — decoration only */
  --orange:      #E8923A; /* THE sol orange. DECORATION ONLY (see contrast law) */
  --orange-ink:  #B06A1A; /* accessible orange — ALL orange text + links on light */
  --orange-wash: #FBEFDD; /* soft orange tint — pill / avatar / badge fills */

  /* ── surfaces (canon background set — no off-canon page colors) ───────── */
  --cream:        #FAF3E4; /* warm page bg (product-chrome / trust surfaces) */
  --cream-bright: #FEFCF8; /* elevated cards / inputs on cream */
  --paper:        #FFFFFF; /* white page bg / grouped-list rows */
  --surface-dark: #1A1A1A; /* dark contexts (white-on-dark) */

  /* ── ink (text) ──────────────────────────────────────────────────────── */
  --ink:         #1A1A1A; /* primary text + the lowercase wordmark (never orange); works on any ground */
  --ink-soft:    #5B5246; /* secondary — WARM; for cream/warm grounds */
  --ink-faint:   #6E6453; /* meta/muted — WARM; for cream/warm grounds */
  --ink-on-dark: #FFFFFF; /* text on --surface-dark only */
  /* neutral inks — for --paper (white) grounds. Warm ink reads dusty on stark white,
   * so paper surfaces use these (founder-approved two-ground rule 2026-06-16):
   * warm ink on warm ground, neutral ink on paper. */
  --ink-soft-paper:  #555555; /* secondary text on white/paper */
  --ink-faint-paper: #767676; /* meta/muted on white/paper (4.5:1 on white) */

  /* ── lines ───────────────────────────────────────────────────────────── */
  --hairline:    #ECE3D0; /* warm divider / border */
  --hairline-2:  #E2D7BF; /* stronger warm border */

  /* ── semantic — status palette (added 2026-06-24, Phase 5 DS0) ───────────
   * Each family mirrors the orange triad: base = decoration/icon/left-border
   * (NOT text on light), -ink = accessible text/detail (≥4.5:1 on every canon
   * ground), -wash = soft badge/band fill. WARM-ONLY: green + gold-amber + red,
   * NO cool blue (sol is a warm brand). "info / in-progress / neutral / waiting"
   * states are NOT a color — use --ink-faint/--ink-soft on --hairline/--cream-bright.
   * Contrast verified on cream: success-ink 5.88 / warn-ink 6.69 / danger 6.58. */
  --danger:        #9F2D2D; /* destructive / error text */
  --danger-wash:   #F8E9E6; /* error band / destructive-state fill */
  --success:       #3F9D6A; /* done / healthy — decoration / icon / border only */
  --success-ink:   #166534; /* success text + detail (accessible) */
  --success-wash:  #E7F1E9; /* success badge / band fill */
  --warn:          #C99A2E; /* caution / pending-action / known-issue — gold-amber, distinct from brand orange; decoration only */
  --warn-ink:      #7C4A0C; /* warn text + detail (accessible) */
  --warn-wash:     #FBF1D6; /* warn badge / band fill */
  --focus:         #B06A1A; /* visible focus ring (= orange-ink) */

  /* ── type ────────────────────────────────────────────────────────────────
   * --font-display: brand register — headings + wordmark, Comfortaa Bold 700.
   *   REQUIRED wherever the brand speaks (display, wordmark, T1 hero) — non-negotiable.
   * --font-body: body. CMO ruling 2026-06-15 (b): Inter PREFERRED, system fallback
   *   acceptable — a surface that doesn't ship the Inter woff2 still degrades cleanly
   *   on the stack below. Inter, when loaded, is self-hosted (cmo/brand/fonts/); no
   *   external font CDN, ever. Decision: records/decisions/260615-cmo-web-alignment-identity-rulings.md */
  --font-display: 'Comfortaa', ui-rounded, 'Trebuchet MS', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  --text-min:  12px; /* hard floor — nothing smaller, anywhere */
  --text-body: 16px; /* preferred body size */

  --weight-body:    400;
  --weight-medium:  600;
  --weight-display: 700; /* Comfortaa Bold */

  /* ── radius ──────────────────────────────────────────────────────────── */
  --radius:    14px; /* cards, groups, menus */
  --radius-sm:  9px; /* buttons, inputs */

  /* ── space scale (from the reference impl) ───────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 22px;
  --space-6: 28px;
  --space-7: 36px;
  --space-8: 48px;

  /* ── touch ───────────────────────────────────────────────────────────── */
  --touch-min: 44px; /* 46px on primary buttons/inputs */
}

/* Breakpoints are documented here but live in @media (custom properties can't
 * be used in media queries). Mobile-first: every surface works at mobile before
 * desktop. Test widths: mobile 390 · tablet 768 · desktop 1280. */