/* ==========================================================================
   tokens.css — every brand decision lives here.
   site.css must never hardcode a color. A rebrand is this file only.

   Palette sampled directly from the logo artwork:
     orange #E87A23 · navy #0A325D · mid blue #466984 · slate #4D6F8D · cream #CCCCC2

   Measured contrast (not eyeballed):
     #E87A23 on paper = 2.8:1  — decorative and large-display only, never body text
     #A8500F on paper = 5.3:1  — links and orange text
     #FFFFFF on navy  = 12.9:1 — the primary button in light mode
   ========================================================================== */

:root {
  /* --- brand constants (theme-invariant) --- */
  --brand-orange: #e87a23;
  --brand-navy: #0a325d;
  --brand-navy-deep: #06203c;
  --brand-blue: #466984;
  --brand-slate: #4d6f8d;
  --brand-cream: #ccccc2;

  /* --- surfaces --- */
  --bg: #fbfaf7;
  --bg-raised: #ffffff;
  --bg-sunken: #f2efe8;
  --bg-invert: #0a325d;
  --plate: #ffffff; /* white card behind supplied-on-white logos */

  /* --- ink --- */
  --ink: #12283f;
  --ink-muted: #4d6f8d;
  --ink-invert: #f4f7fa;
  --ink-invert-muted: #a8c0d6;

  /* --- accent --- */
  --accent: #e87a23;
  --accent-strong: #a8500f;
  --accent-soft: #fdf0e4;
  --accent-on-invert: #f7a44f;

  /* --- primary button --- */
  --btn-bg: #0a325d;
  --btn-fg: #ffffff;
  --btn-bg-hover: #a8500f;

  /* --- lines & states --- */
  --line: #e0dbd1;
  --line-strong: #b9b3a6;
  --focus: #0a325d;
  --ok: #1c6b4a;
  --err: #a4232b;
  --err-soft: #fdeceb;

  /* --- type ---------------------------------------------------------------
     Archivo is a grotesque that goes properly heavy, which the logo's own
     lettering calls for. Every stack keeps a real system fallback. */
  --font-display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--2: clamp(0.75rem, 0.73rem + 0.08vw, 0.8rem);
  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.94rem);
  --step-0: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.17rem + 0.4vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --step-3: clamp(1.65rem, 1.45rem + 1.5vw, 2.85rem);
  --step-4: clamp(1.95rem, 1.55rem + 2.6vw, 4rem);
  --step-5: clamp(2.3rem, 1.5rem + 4.6vw, 5.75rem);
  --step-6: clamp(2.6rem, 1.35rem + 7vw, 7.5rem);

  --lh-tight: 0.98;
  --lh-snug: 1.18;
  --lh-body: 1.62;
  --track-tight: -0.03em;
  --track-wide: 0.14em;

  /* --- space --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 7rem;

  /* --- shape --- */
  --radius: 8px;
  --radius-lg: 16px;
  --radius-xl: 26px;
  --shadow-sm: 0 1px 2px rgb(10 50 93 / 7%), 0 3px 10px rgb(10 50 93 / 5%);
  --shadow: 0 2px 4px rgb(10 50 93 / 6%), 0 12px 32px rgb(10 50 93 / 9%);
  --shadow-lg: 0 4px 8px rgb(10 50 93 / 7%), 0 24px 60px rgb(10 50 93 / 14%);

  --measure: 62ch;
  --page: 1180px;
  --page-narrow: 720px;
}

/* Dark applies when chosen, or when the system is dark and light wasn't chosen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #081726;
    --bg-raised: #0f2439;
    --bg-sunken: #050f1b;
    --bg-invert: #0d2b47;
    --plate: #ffffff;

    --ink: #e9eff6;
    --ink-muted: #a3b8cd;
    --ink-invert: #f4f7fa;
    --ink-invert-muted: #a8c0d6;

    --accent: #f0913f;
    --accent-strong: #f7a44f;
    --accent-soft: #17293c;
    --accent-on-invert: #f7a44f;

    --btn-bg: #f0913f;
    --btn-fg: #08192b;
    --btn-bg-hover: #ffb268;

    --line: #21405c;
    --line-strong: #4d749a;
    --focus: #f0913f;
    --ok: #5fc79b;
    --err: #ff9c9c;
    --err-soft: #33222a;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%), 0 3px 10px rgb(0 0 0 / 28%);
    --shadow: 0 2px 4px rgb(0 0 0 / 40%), 0 12px 32px rgb(0 0 0 / 34%);
    --shadow-lg: 0 4px 8px rgb(0 0 0 / 44%), 0 24px 60px rgb(0 0 0 / 44%);
  }
}

:root[data-theme="dark"] {
  --bg: #081726;
  --bg-raised: #0f2439;
  --bg-sunken: #050f1b;
  --bg-invert: #0d2b47;
  --plate: #ffffff;

  --ink: #e9eff6;
  --ink-muted: #a3b8cd;
  --ink-invert: #f4f7fa;
  --ink-invert-muted: #a8c0d6;

  --accent: #f0913f;
  --accent-strong: #f7a44f;
  --accent-soft: #17293c;
  --accent-on-invert: #f7a44f;

  --btn-bg: #f0913f;
  --btn-fg: #08192b;
  --btn-bg-hover: #ffb268;

  --line: #21405c;
  --line-strong: #4d749a;
  --focus: #f0913f;
  --ok: #5fc79b;
  --err: #ff9c9c;
  --err-soft: #33222a;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%), 0 3px 10px rgb(0 0 0 / 28%);
  --shadow: 0 2px 4px rgb(0 0 0 / 40%), 0 12px 32px rgb(0 0 0 / 34%);
  --shadow-lg: 0 4px 8px rgb(0 0 0 / 44%), 0 24px 60px rgb(0 0 0 / 44%);
}