/* Design tokens — AC Horsens Scouting.
   Light-forward, rounded, "in the team's likeness": the badge is yellow and black,
   so the app is too. Inherits the VPS v3 structure (radii, shadows, scale, motion)
   with a Horsens palette. Source: docs/superpowers/specs/2026-08-07-*-design.md §3.

   ONE RULE ABOVE ALL: #FFDD00 is 1.2:1 on white. It is never text. It is a fill,
   always carrying --ink on top (14:1). */

:root {
  color-scheme: light;

  /* Surfaces & ink — near-neutral paper. VPS's warm cream turned the yellow
     muddy; a cooler ground keeps it clean. */
  --paper:      #F7F7F4;  /* page canvas */
  --card:       #FFFFFF;  /* raised surfaces: cards, panels, rail */
  --on-ink:     #FCFCF8;  /* near-white: text/fills ON dark surfaces (never pure #fff) */
  --ink:        #1A1A18;  /* the crest black: headings, names, crest, primary fills */
  --ink-soft:   #3E3E3A;  /* strong body, control labels */
  --muted:      #6C6C66;  /* secondary text */
  --faint:      #9A9A92;  /* tertiary text, placeholders, quiet meta */
  --line:       #E7E7E1;  /* borders, dividers (the workhorse) */
  --line-soft:  #F0F0EA;  /* softest hairline */
  --stripe-faint: #FFF8CC; /* quiet brand fills (avatars, ring markers) */

  /* AC HORSENS YELLOW, taken from the badge file itself. A HIGHLIGHT FILL only:
     the brand band, the crest, the first-choice marker, the unread badge, the
     active filter. Always with --ink on top. Never text, never a border on white,
     never a lone focus ring. */
  --yellow:      #FFDD00;
  --yellow-tint: #FFF8CC;
  /* The interactive accent is the crest BLACK, not the yellow.
     Yellow at 1.2:1 cannot carry text, a border or a focus ring on a light
     ground; ink does all three at 14:1 and is equally "the brand". Yellow is
     reserved for highlight FILLS with ink on top — the first-choice marker, the
     unread badge, the active filter, the brand band, the crest. */
  --accent:      var(--ink);
  --accent-tint: var(--yellow-tint);

  /* Grades — text / background / dot for each of A+, A, B, C and none.
     A+ and A share a hue and differ in WEIGHT ("A+ is an A, but more") rather
     than inventing a fifth colour on a two-colour brand: A+ is a SOLID fill,
     A is a tint. B is neutral stone, not amber, so nothing competes with the
     brand yellow — and "B = keep watching" is what neutral should mean. */
  --gAp:   #FFFFFF;  --gAp-bg:   #1E6B3C;  --gAp-dot:   #10502A;
  --gA:    #1E6B3C;  --gA-bg:    #E4F2E8;  --gA-dot:    #2F9E5F;
  --gB:    #5E5A52;  --gB-bg:    #EFEDE7;  --gB-dot:    #A8A296;
  --gC:    #A63A2E;  --gC-bg:    #FAE9E6;  --gC-dot:    #D25B4B;
  --gnone: #6C6C66;  --gnone-bg: #F1F1EB;  --gnone-dot: #C8C8C0;

  /* Which JUDGEMENT a grade is, not how good it is. A scout files two letters —
     where the player is now and where he ends up — and in the Table they sit
     stacked in one cell, so the reader needs to tell the rows apart at a glance
     without reading a label. Brian's own pairing: current orange, potential
     purple. Deliberately outside the A+/A/B/C palette above, because these say
     "current vs ceiling" and that must not be confused with "good vs bad". */
  --cur:   #9A5000;  --cur-bg:   #FBF0E4;
  --pot:   #5F3E9E;  --pot-bg:   #F0ECFA;

  /* Status — success / warning / danger / neutral. These were VPS's verdict
     triples, but half the app already used them for save status, login errors
     and upload state, so they are named for what they actually do. Grades use
     the --g* ramp above; these never carry a grade. */
  --ok:      #1E6B3C;  --ok-bg:      #E4F2E8;  --ok-dot:      #2F9E5F;
  --warn:    #8A5B00;  --warn-bg:    #FBF1DC;  --warn-dot:    #E3A008;
  --bad:     #A63A2E;  --bad-bg:     #FAE9E6;  --bad-dot:     #D25B4B;
  --neutral: #6C6C66;  --neutral-bg: #F1F1EB;  --neutral-dot: #C8C8C0;

  /* Page width — the board/dossier fill a good chunk of wide screens rather than
     sitting in a narrow 1280 column; padding keeps breathing room at the edges. */
  --wrap-max: 1680px;

  /* Radii — rounded and friendly. */
  --r-card:  18px;  /* player cards, panels */
  --r-inner: 12px;  /* inner elements: notes, stat cells, video tiles */
  --r-pill:  999px; /* chips, filters, toggles, verdict pills */
  --r-panel: 22px;  /* the summary panel */

  /* Depth — soft shadows only. NO machined edges, NO borders-as-hierarchy. */
  --shadow:      0 1px 2px rgba(27,26,24,.05), 0 10px 30px -12px rgba(27,26,24,.12);
  --shadow-lift: 0 2px 4px rgba(27,26,24,.06), 0 18px 44px -14px rgba(27,26,24,.18);
  --shadow-modal:0 24px 64px -12px rgba(27,26,24,.35);

  /* Fonts — Barlow Condensed (display: names, headings, figures — the sporty,
     condensed sporting register), Manrope (body). Both cover æ ø å.
     Self-hosted via @fontsource — no runtime Google. */
  --font-display: 'Barlow Condensed', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Manrope', 'Segoe UI', system-ui, sans-serif;

  /* Type scale (px) — friendly, warm hierarchy. face/weight live on .t-* utils. */
  /* Condensed display reads narrower, so the scale runs a touch larger. */
  --fs-hero:    54px;  /* dossier player name (clamps down on mobile) */
  --fs-h1:      34px;  /* board summary lead */
  --fs-h2:      24px;  /* group headings, section headings */
  --fs-title:   21px;  /* brand wordmark, card names */
  --fs-figure:  25px;  /* big stat figures */
  --fs-body:    14px;  /* body */
  --fs-sm:      13px;  /* controls, meta */
  --fs-xs:      12px;  /* labels, chips */
  --fs-micro:   11px;  /* provenance, tiny labels */

  /* Spacing scale — 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* Motion — calm, ease-out, no bounce. */
  --ease:      cubic-bezier(0.2, 0, 0, 1);
  --dur-hover: 120ms;
  --dur-state: 160ms;
  --dur-enter: 200ms;
  --dur-exit:  140ms;

  /* ...except where something TRAVELS. Brian, 2026-08-11: "needs to feel bouncy as
     well as the toggles". --ease above never passes its destination, which is right
     for a colour or a border and reads as dead for a thing that moves across the
     screen. This one overshoots and settles. Reserved for movement and for a press:
     it has no business on a hover tint. */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-bounce:  460ms;
  --dur-press:   240ms;
}