/* The Filter: design tokens. SINGLE SOURCE OF TRUTH.
 *
 * Every page (landing, app, admin, design.html) links this file. Components
 * never name a raw color, size, radius or duration, they use a token below.
 * Reference page: /design.html. Rationale: DESIGN-AUDIT-AND-DIRECTION.md.
 *
 * Direction: PAPER (chosen 2026-10-07). White ground, blue is the brand, orange is
 * the action. Dark mode is Midnight navy. Pass/fail/caution values are the
 * contrast-tested ones from BRAND.md (do not re-pick them by eye).
 * Only the NAMES became semantic. The old names (--ground, --deck, --ink...)
 * remain at the bottom as aliases so existing screens keep working while they
 * are migrated. Delete an alias once nothing references it.
 *
 * Meaning rules:
 *   accent  = an action you can take (buttons, brand dot). Nothing else.
 *   trust   = structure and credibility (active tab, rings, grade B).
 *   pass / caution / fail = outcomes and status only, never decoration.
 */

/* ---------- fonts (self-hosted, latin) ---------- */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 700 800; font-display: swap;
  src: url("./fonts/Archivo-var.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("./fonts/IBMPlexMono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("./fonts/IBMPlexMono-700.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  /* ---------- color: light ---------- */
  --bg:             #FFFFFF;
  --surface:        #FFFFFF;
  --surface-raised: #F3F6FB;
  --border:         #DDE4EF;

  --text:           #0B1220;
  --text-2:         #566074;

  --accent:         #FF5A1F;
  --accent-soft:    #FFE4D8;
  --accent-alt:     #FF7A3D;
  --on-accent:      #0B1220;   /* white on ember is 3.3:1, dark is 5.6:1 */

  --trust:          #2451FF;
  --trust-ink:      #122A9A;
  --trust-soft:     #EAF0FF;

  --pass:           #0B7A54;
  --pass-soft:      #E7F8F1;
  --caution:        #B5790A;
  --caution-soft:   #E6DDCC;
  --caution-ink:    #7A5208;   /* caution TEXT on a soft fill: --caution is 2.7:1 there, this is 5.1:1 */
  --fail:           #C42931;
  --fail-soft:      #FDEBEC;
  --neutral-soft:   #EEF1F6;

  --shadow:         rgba(11, 18, 32, .08);

  /* ---------- typography ---------- */
  --font-display: "Archivo", ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  --font-sans:    ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* size scale. 11px is the floor, nothing smaller ships. */
  --fs-label:   11px;
  --fs-caption: 12px;
  --fs-small:   13px;
  --fs-body:    15px;
  --fs-body-l:  17px;
  --fs-h3:      20px;
  --fs-h2:      24px;
  --fs-h1:      32px;
  --fs-display: 48px;

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.55;
  --tracking-label: .12em;

  /* ---------- spacing ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 80px;

  /* ---------- radius ---------- */
  --r-sm:   4px;    /* inputs, badges, chips */
  --r-md:   8px;    /* cards, buttons */
  --r-lg:   12px;   /* modals, hero, trade result */
  --r-pill: 999px;  /* status pills only */

  /* ---------- elevation (three levels, no glow, no color) ---------- */
  --e-1: 0 1px 2px var(--shadow);
  --e-2: 0 2px 8px var(--shadow);
  --e-3: 0 12px 30px var(--shadow);

  /* ---------- motion: clarity, confirmation, progress ---------- */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
  --ease:   cubic-bezier(.2, .7, .2, 1);

  /* ---------- touch / layout ---------- */
  --tap: 44px;
  --container: 1180px;

  /* ---------- derived (reference primitives, defined once) ---------- */
  --info: var(--trust);

  --grade-a:        var(--pass);
  --grade-a-soft:   var(--pass-soft);
  --grade-b:        var(--trust);
  --grade-b-soft:   var(--trust-soft);
  --grade-skip:     var(--text-2);
  --grade-skip-soft:var(--neutral-soft);

  --chart-1: var(--trust);
  --chart-2: var(--pass);
  --chart-3: var(--caution);
  --chart-4: var(--fail);
  --chart-5: var(--text-2);
  --chart-grid: var(--border);

  --focus: var(--trust);

  /* market sessions: categorical, so they must not borrow status colors */
  --sess-sydney:  var(--text-2);
  --sess-tokyo:   var(--trust);
  --sess-london:  var(--trust-ink);
  --sess-newyork: color-mix(in srgb, var(--trust) 70%, var(--surface-raised));

  /* ---------- legacy aliases (migrate away, then delete) ---------- */
  --ground: var(--bg);
  --deck: var(--surface);
  --deck-2: var(--surface-raised);
  --rule: var(--border);
  --ink: var(--text);
  --ash: var(--text-2);
  --ember: var(--accent);
  --ember-soft: var(--accent-soft);
  --flame: var(--accent-alt);
  --blue: var(--trust);
  --blue-ink: var(--trust-ink);
  --blue-soft: var(--trust-soft);
  --jade: var(--pass);
  --jade-soft: var(--pass-soft);
  --amber: var(--caution);
  --amber-soft: var(--caution-soft);
  --crimson: var(--fail);
  --crimson-soft: var(--fail-soft);
  --ash-soft: var(--neutral-soft);
  --mono: var(--font-mono);
  --sans: var(--font-sans);
}

/* ---------- color: dark ("midnight abyss", blue-tinted, not inverted) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A1226; --surface: #111B36; --surface-raised: #1A2748; --border: #25335C;
    --text: #EEF2FF; --text-2: #9AA8CC;
    --accent: #FF6A2B; --accent-alt: #FF8550; --accent-soft: rgba(255, 106, 43, .16);
    --trust: #5B83FF; --trust-ink: #C9D6FF; --trust-soft: rgba(91, 131, 255, .16);
    --pass: #3BB77E;    --pass-soft: rgba(59, 183, 126, .16);
    --caution: #E3AE1C; --caution-soft: rgba(227, 174, 28, .16); --caution-ink: #E3AE1C;
    --fail: #E1575E;    --fail-soft: rgba(225, 87, 94, .16);
    --neutral-soft: rgba(154, 168, 204, .16);
    --shadow: rgba(0, 0, 0, .5);
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A1226; --surface: #111B36; --surface-raised: #1A2748; --border: #25335C;
  --text: #EEF2FF; --text-2: #9AA8CC;
  --accent: #FF6A2B; --accent-alt: #FF8550; --accent-soft: rgba(255, 106, 43, .16);
  --trust: #5B83FF; --trust-ink: #C9D6FF; --trust-soft: rgba(91, 131, 255, .16);
  --pass: #3BB77E;    --pass-soft: rgba(59, 183, 126, .16);
  --caution: #E3AE1C; --caution-soft: rgba(227, 174, 28, .16); --caution-ink: #E3AE1C;
  --fail: #E1575E;    --fail-soft: rgba(225, 87, 94, .16);
  --neutral-soft: rgba(154, 168, 204, .16);
  --shadow: rgba(0, 0, 0, .5);
}

/* ---------- motion off when the user asks ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- shared base: visible focus everywhere ---------- */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }