/* Sampled from the reference print and charts in assets/reference/. */
:root{
  /* --- Ink: the 1984 digest cover black --- */
  --ink-900:#121110;
  --ink-800:#1F1D1A;
  --ink-700:#332F2A;
  --ink-600:#4A4640;
  --ink-400:#7C766C;
  --ink-200:#A9A29A;

  /* --- Newsprint: chart backgrounds and digest paper --- */
  --news-050:#FDF8EC;
  --news-100:#F8F0DC;
  --news-200:#EFE3C6;
  --news-300:#DDCEAA;
  --news-400:#C3B190;

  /* --- Digest yellow / Steelers gold: the brand's loudest colour --- */
  --gold-200:#FFE982;
  --gold-400:#FFD400;
  --gold-500:#F2C300;
  --gold-600:#C99B04;

  /* --- Cover red: mastheads, starbursts, the primary action --- */
  --red-400:#E2564F;
  --red-600:#D6252B;
  --red-700:#A81C22;

  /* --- Pro Preview blue --- */
  --blue-500:#2F6FD0;
  --blue-700:#1B4B9B;

  /* --- Football Manager terminal cyan: data tables --- */
  --terminal-100:#DCF1F8;
  --terminal-300:#A9DCEC;
  --terminal-500:#6FB8D0;

  /* --- Chart series (Chartball / Owen Phillips accents) --- */
  --green-600:#2E6B4F;
  --orange-500:#E8973A;
  --magenta-500:#A44B9B;
  --teal-500:#3E8E8B;

  /* Ordered for separability, not for brightness. Taking the first N gives the
     safest available set at that count: 3 series is the comfortable ceiling
     (worst pair dE 17.3 under deuteranopia), 4 still clears at 13.0. At 5+ the
     1px ink outline on every mark is doing accessibility work — it is what makes
     a 6-8 dE pair legal. Do not drop it to make a chart look cleaner.
     Gold (1.39:1 on newsprint) and orange (2.29:1) are below the 3:1 floor for an
     unoutlined mark: use them on large marks only, never a 2px line or small dot.
     Green-600 sits at 7 because it collides with red, ink and teal.
     For 5+ categories prefer one series colour plus --series-muted for the rest. */
  --series-1:var(--red-600);
  --series-2:var(--blue-700);
  --series-3:var(--orange-500);
  --series-4:var(--teal-500);
  --series-5:var(--magenta-500);
  --series-6:var(--gold-400);
  --series-7:var(--green-600);
  --series-8:var(--ink-600);
  --series-muted:var(--news-300);

  /* --- Semantic --- */
  /* Change 45. --ink-900 is a palette entry, not a semantic one, and two jobs were riding on
     it: type and rules on newsprint, which must move when the theme moves, and the ink that
     sits on champion gold, which must not, because the gold is #FFD400 in both themes.
     Components reference the two semantic tokens; --ink-900 is only what they are built from. */
  --text-strong:var(--ink-900);
  /* Never themed, never aliased to an ink ramp entry: gold does not move, so its partner
     cannot. Used for type, rules and keylines drawn on --gold-400 or --gold-200. */
  --on-gold:#121110;
  --text-body:var(--ink-800);
  --text-muted:var(--ink-400);
  --text-inverse:var(--news-050);
  --text-accent:var(--red-600);
  --text-link:var(--red-600);
  --text-link-hover:var(--ink-900);

  --surface-page:var(--news-100);
  --surface-card:var(--news-050);
  --surface-sunken:var(--news-200);
  --surface-dark:var(--ink-900);
  --surface-dark-alt:var(--blue-700);
  --surface-accent:var(--gold-400);
  --surface-data:var(--terminal-300);
  --surface-chart:var(--news-050);

  --border-hairline:var(--news-300);
  --border-rule:var(--ink-800);
  --border-strong:var(--ink-900);
  --border-dark-hairline:rgba(253,248,236,.24);

  --action-primary:var(--red-600);
  --action-primary-hover:var(--red-700);
  --action-secondary:var(--gold-400);
  --action-secondary-hover:var(--gold-500);
  --action-quiet-hover:var(--news-200);

  --status-win:var(--green-600);
  --status-loss:var(--red-600);
  --status-tie:var(--ink-400);
  --status-notice:var(--gold-500);

  --white:#FFFFFF;
  --surface-brand:var(--gold-400);
  --surface-cover:var(--ink-900);
  --text-on-brand:var(--ink-900);
  --text-on-cover:var(--gold-400);
  --border-inverse:var(--white);

  --focus-ring:var(--red-600);
  --overlay-scrim:rgba(18,17,16,.72);
}

/* The split is what makes a dark theme buildable: everything below re-points the semantic
   layer at the ink ground, and --on-gold stays where it is. Nothing sets data-theme yet. */
[data-theme="dark"]{
  --text-strong:var(--news-050);
  --text-body:var(--news-100);
  --text-muted:var(--ink-200);
  --text-inverse:var(--ink-900);

  --surface-page:var(--ink-900);
  --surface-card:var(--ink-800);
  --surface-sunken:#0C0B0A;
  --surface-dark:var(--news-050);
  --surface-chart:var(--ink-800);

  --border-hairline:var(--ink-600);
  --border-rule:var(--news-200);
  --border-strong:var(--news-050);

  --text-on-brand:var(--on-gold);
  --action-quiet-hover:var(--ink-700);
}