/* Palette sampled directly from the club badge and the kit concept.
   Clay is surface-only: it measures 1.91:1 on cream and fails as text. */
:root {
  color-scheme: light dark;

  --ink:   #0C0C0C;
  --cream: #F0E4B4;
  --sand:  #DCD2B4;
  /* Clay is the third kit colour. Documented, deliberately unused in the UI:
     at 1.91:1 on cream it cannot carry text, and the design is stronger held
     to ink and cream alone. */
  --clay:  #BEA08C;

  /* Oswald echoes the badge's arched lettering and keeps scorelines narrow on a phone.
     Source Serif answers the high-contrast serif V at the centre of the crest. */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Source Serif 4', Georgia, serif;

  --step--1: 0.8125rem;
  --step-0:  1rem;
  --step-1:  1.25rem;
  --step-2:  1.5rem;
  --step-3:  2rem;
  --step-4:  clamp(2.5rem, 9vw, 4rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Kept tight: the crest is the only circle in the system. */
  --radius-sm: 2px;
  --radius-md: 4px;

  --gutter: 1rem;
  --measure: 60ch;

  /* ---- motion ----
     The project had exactly one easing curve, written inline in page.css.
     Promoted here and given a scale, because the scroll work needs the same
     curve in a dozen places and a marquee that disagrees with a reveal reads
     as a bug rather than a choice. */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.2s;
  --dur-2: 0.45s;
  --dur-3: 0.8s;
  --dur-4: 1.4s;

  /* Step 4 tops out at 4rem, which is a headline. These are meant to be
     architecture: type you scroll past rather than read in one glance. */
  --step-5: clamp(4rem, 13vw, 11rem);
  --step-6: clamp(3rem, 18vw, 14rem);

  --z-veil: 100;
  --z-cursor: 90;
  --z-nav: 50;
}

:root,
:root[data-theme="light"] {
  --surface: var(--cream);
  --surface-raised: #E8DAA8;
  --text: var(--ink);
  --text-muted: #5C4F3A;
  --rule: rgba(12, 12, 12, 0.2);
  --rule-strong: rgba(12, 12, 12, 0.85);
  --mark-on: var(--cream);
  --focus: var(--ink);
  /* Crest gold is 1.53:1 on cream, too faint even for a line. Darkened to
     4.06:1, still recognisably the same gold. */
  --accent-line: #7B6C3C;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: var(--ink);
    --surface-raised: #17150F;
    --text: var(--cream);
    --text-muted: #A89578;
    --rule: rgba(240, 228, 180, 0.22);
    --rule-strong: rgba(240, 228, 180, 0.8);
    --mark-on: var(--ink);
    --focus: var(--cream);
    --accent-line: #C6BA8A;
  }
}

:root[data-theme="dark"] {
  --surface: var(--ink);
  --surface-raised: #17150F;
  --text: var(--cream);
  --text-muted: #A89578;
  --rule: rgba(240, 228, 180, 0.22);
  --rule-strong: rgba(240, 228, 180, 0.8);
  --mark-on: var(--ink);
  --focus: var(--cream);
  /* The crest's own gold, 10:1 on ink. */
  --accent-line: #C6BA8A;
}