/* ============================================================================
   ASPIER web brand tokens: the SINGLE SOURCE OF TRUTH for colour on aspier.app.
   Extracted from constants/theme.ts (the token set the app consumes).
   Do not hand-edit values here without changing constants/theme.ts first;
   do not define colours in any page. Consume these variables.

   Ruling (founder, 2026-07-14): ASPIER is racing green + bone. The orange
   direction (the C8602A / E89B3C era, spelled without a hash so no tooling
   parses it) is dead brand, never reintroduced. Any colour literal outside
   this file fails the deploy gate (scripts/web-brand-gate.mjs).

   Permitted beyond these tokens: #000 / #fff as shadow or colour-mix
   primitives, transparent, currentColor, and rgba() alphas of the primitives.
   ========================================================================== */

/* Self-hosted type (OFL). Archivo for display, Source Sans 3 for body. No
   third-party font host: nothing leaves the visitor's browser for a font. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin.woff2") format("woff2");
}

:root {
    --bone: #EFE9DA; --paper: #F7F2E4; --bone-soft: #E5DECC;
    --ink: #16140F; --warm-ink: #221E16;
    --racing-green: #2C3A28; --sage: #87A37C; --sage-deep: #3D5436;
    --burgundy: #6B2E32; --burgundy-lifted: #C26970;

    /* role tokens, light (lightTokens) */
    --bg: var(--bone);
    --surface: var(--paper);
    --surface-2: #FFFDF4;
    --text: var(--ink);
    --text-2: rgba(22,20,15,0.70);
    --border: rgba(22,20,15,0.10);
    --border-strong: rgba(22,20,15,0.18);
    --brand: var(--racing-green);
    --brand-soft: rgba(44,58,40,0.10);
    --cta-bg: var(--racing-green);
    --cta-text: var(--bone);
    --ink-surface: var(--racing-green);
    --on-ink: var(--bone);
    --on-ink-2: rgba(239,233,218,0.72);
    --accent-warm: var(--burgundy);
    --accent-warm-soft: rgba(107,46,50,0.12);
    --shadow-card: 0 8px 14px rgba(22,20,15,0.16);
    --device-frame: var(--ink);
    --danger: #B3362A;      /* dangerRed, theme.ts token of record */
  }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--ink);
    --surface: var(--warm-ink);
    --surface-2: #2C281F;
    --text: var(--bone);
    --text-2: rgba(239,233,218,0.63);
    --border: rgba(239,233,218,0.08);
    --border-strong: rgba(239,233,218,0.16);
    --brand: var(--sage);
    --brand-soft: rgba(135,163,124,0.14);
    --cta-bg: var(--bone);
    --cta-text: var(--ink);
    --ink-surface: var(--sage-deep);
    --on-ink: var(--bone);
    --on-ink-2: rgba(239,233,218,0.72);
    --accent-warm: var(--burgundy-lifted);
    --accent-warm-soft: rgba(194,105,112,0.14);
    --shadow-card: 0 10px 16px rgba(0,0,0,0.45);
    --device-frame: #2C281F;
    --danger: #B3362A;
  }
}