/* Who's Legacy, colour. Four brand colours, and only these four,
   plus a short bench of supporting greys for body & secondary text.
   Never pure #fff / #000, no gradients, no tints outside this list.
   Everything must still read in grayscale. */

:root{
  /* ---- Brand: four, and only these four ---- */
  --crimson:#8B0E0E;   /* the brand, hero & CTA fields, rules, numerals, drop caps */
  --ink:#101010;       /* masthead bar, the one dramatic dark section, footer */
  --stone:#E8E8E8;     /* quiet alternating band between two paper sections */
  --paper:#F4F6FC;     /* default page ground, and all text on crimson or ink */

  /* ---- Supporting greys: body & secondary text ONLY ---- */
  --grey-body:#2A2A2E;             /* reading copy on paper/stone */
  --grey-secondary-stone:#45454B;  /* secondary text on stone */
  --grey-secondary-paper:#56565E;  /* secondary text on paper */
  --crimson-pressed:#6E0B0B;       /* crimson hover / pressed */

  /* ---- Semantic surfaces (full-bleed horizontal bands) ---- */
  --surface-page:var(--paper);
  --surface-stone:var(--stone);
  --surface-crimson:var(--crimson);
  --surface-ink:var(--ink);

  /* ---- Text on light grounds (paper / stone) ---- */
  --text-primary:var(--ink);                    /* display headings */
  --text-body:var(--grey-body);                 /* reading copy */
  --text-secondary:var(--grey-secondary-paper); /* captions / notes on paper */
  --text-secondary-stone:var(--grey-secondary-stone);
  --text-brand:var(--crimson);                  /* numerals, labels, drop caps */

  /* ---- Text on crimson, paper at 70%+ (floor) ---- */
  --text-on-crimson:rgba(244,246,252,0.93);
  --text-on-crimson-secondary:rgba(244,246,252,0.74);
  --text-on-crimson-label:rgba(244,246,252,0.80);

  /* ---- Text on ink, paper at 55%+ (floor) ---- */
  --text-on-ink:rgba(244,246,252,0.92);
  --text-on-ink-secondary:rgba(244,246,252,0.60);
  --text-on-ink-label:rgba(244,246,252,0.66);

  /* ---- Hairline rules (1px) ---- */
  --rule-on-light:rgba(16,16,16,0.16);
  --rule-on-dark:rgba(244,246,252,0.22);
  --rule-crimson:var(--crimson);
  --rule-width:1px;

  /* ---- Interaction ---- */
  --crimson-hover:var(--crimson-pressed);
}