/* Line Reading — the app's palette. Matches the landing page.
 *
 * Dark: #141414, warm off-white, one orange accent. The values here are the
 * same ones written inline in landing.html, so the sales page and the tool look
 * like one product.
 *
 * They are duplicated rather than shared, and that is deliberate. landing.html
 * links nothing at all, because it was once reviewed as a file opened from disk
 * where /static/theme.css resolved to the filesystem root, 404'd, and left the
 * whole page as Times New Roman on white. A marketing page carries no
 * dependency worth that. The app is only ever served, so it can link this.
 *
 * If you change a colour, change it in both. tests/test_contrast.py checks the
 * values in this file; tests/test_theme_parity.py checks the two files agree.
 *
 * The token NAMES are unchanged from the original light theme, so every
 * component rule in index.html and auditions.html keeps working untouched.
 * Neither app file contains a single hardcoded colour — checked — so the whole
 * interface follows from here.
 */

:root {
  /* Darkest to lightest. Inverted from the light theme: --gray-0 is now the
     page rather than white. Nothing references these directly (verified), so
     the inversion cannot surprise a component. */
  --gray-0:#141414;
  --gray-10:#1C1C1C;
  --gray-20:#242424;
  --gray-100:#2E2E2E;
  --gray-200:#3A3A3A;
  --gray-400:#86847F;    /* muted — 4.93:1 on the page */
  --gray-600:#A8A6A1;
  --gray-900:#F5F3EF;    /* warm off-white; pure white glares on near-black */

  --surface-0:var(--gray-0);    /* the page */
  --surface-1:var(--gray-10);   /* cards */
  --surface-2:var(--gray-20);   /* raised controls, wells */

  --text-primary:var(--gray-900);
  --text-secondary:var(--gray-600);
  --text-muted:var(--gray-400);

  --border:rgba(255,255,255,.12);
  --border-strong:rgba(255,255,255,.24);

  /* One accent, same orange as the landing page. */
  --text-accent:#E8613C;
  --bg-accent:#2A1710;
  --border-accent:#7A3822;

  --text-pro:#C9A6F0;
  --bg-pro:#241A33;
  --text-warning:#F0C070;
  --bg-warning:#332510;
  --text-danger:#F08A8A;
  --bg-danger:#3A1616;

  --radius:10px;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-mono:"SF Mono",ui-monospace,"Cascadia Mono","Roboto Mono",Menlo,"Courier New",monospace;

  --display:clamp(52px,10vw,132px);
  --headline:clamp(32px,5vw,68px);
  --title:clamp(19px,1.9vw,25px);
  --label:16px;
  --measure:62ch;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* Dark by choice, not by system preference — so it must not be re-inverted for
   anyone whose OS asks for light. This also makes form controls, scrollbars and
   the caret render dark, which is the difference between a dark theme and a
   dark theme with white dropdowns punched through it. */
html { color-scheme: dark; }

::selection { background:var(--text-accent); color:#fff; }

:focus-visible {
  outline:2px solid var(--text-accent);
  outline-offset:3px;
  border-radius:6px;
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}