/* ============================================================
   Matchday — design tokens, speaking Feras DS.
   ============================================================
   These began as a per-image extraction from the Flatstudio mockups, which
   made Matchday an Apple-HIG app: #007AFF blue, #EFEFF4 ground, SF Pro. It
   looked nothing like the rest of the system it now sits inside.

   The NAMES are unchanged, so styles.css needed no rewriting. Only the
   values moved — onto the Paper palette that Feras DS defines
   (notes-shim/ds/tokens/tokens.css), the same ground, ink, hairlines,
   radii and shadows Paper and juno's panel use.

   Two deliberate departures, because a football app is not a notes app:

   1. THE SPORT COLOURS STAY. Live red, win/draw/loss, the pitch green —
      these are content, not chrome. Feras: "you can reuse red green color".
      They are harmonised toward the Paper family where that costs nothing
      (win and loss take Paper's own --ok and --danger), and left vivid
      where the whole point is to shout (LIVE).

   2. DARK MODE STAYS. Feras DS commits to one warm light world and has no
      dark palette; Matchday already had a correct three-state
      implementation and removing it would be a regression. The dark values
      are derived from the same palette rather than invented: a warm dark
      ground, never the OLED black of the original renders, because "never
      pure white" has an obvious mirror.

   Paper's rule that ink is the only brand colour is followed: the Apple
   blue is gone. What was "primary" is now ink, and the one accent event on
   a screen is dune.
   ============================================================ */

:root {
  /* ---- ground and surfaces (Feras DS: --canvas / --card / --hover) ---- */
  --fa-bg:            #f5f5f4;  /* warm grey. Never pure white. */
  --fa-surface:       #fff;     /* cards, sheets — floating a hair above */
  --fa-surface-2:     #ececeb;  /* inset rows, search field */
  /* One step past hover: the selected row in the sidebar. Derived rather
     than picked, so it stays correct when the ground moves — including in
     dark, where it needs no second definition. */
  --fa-raised: color-mix(in srgb, var(--fa-ink) 7%, var(--fa-surface));

  /* ---- text (--ink / --body / --muted) ---- */
  --fa-ink:           #1b1b1f;  /* titles, and the only "brand" colour */
  --fa-ink-2:         #3c3c41;  /* running text */
  --fa-muted:         #8a8a8e;  /* captions, labels, away team */

  /* ---- lines (--line / --line-strong) — 1px, never 2 ---- */
  --fa-hairline:      #ebebea;
  --fa-dotted:        #dcdcda;

  /* ---- action ---- */
  /* Was #007AFF. Ink is the only brand colour in this language, so the
     filled bar, the active tab and the bookmark are ink. */
  --fa-primary:       #1b1b1f;
  /* The single accent event a screen is allowed: dune, Paper's tag colour. */
  --fa-primary-weak:  #e9e3d9;

  /* ---- sport semantics: CONTENT, not chrome ---- */
  /* LIVE keeps its own red. Everything else on the screen is quiet, which
     is exactly what makes this one read as "happening right now". */
  --fa-live:          #e03131;
  --fa-live-weak:     #fbf0ee;  /* Paper's --danger-bg */
  --fa-win:           #3ba46e;  /* Paper's --ok */
  --fa-draw:          #dcdcda;  /* neutral: a draw is not an event */
  --fa-loss:          #c94f3d;  /* Paper's --danger */
  --fa-gold:          #b98900;  /* Paper's --warn — laurels, top-3 badge */
  --fa-pitch:         #3ba46e;
  --fa-pitch-line:    #8fcfae;

  /* ---- elevation: three levels only, nothing glows ---- */
  --fa-shadow-card:  0 2px 8px rgba(27, 27, 31, .06), 0 1px 2px rgba(27, 27, 31, .04);
  --fa-shadow-sheet: 0 18px 50px rgba(27, 27, 31, .14), 0 4px 12px rgba(27, 27, 31, .06);

  /* ---- radius — already on Feras DS's 8/12/16/24 scale ---- */
  --fa-r-sheet:  24px;
  --fa-r-card:   12px;
  --fa-r-tile:   16px;
  --fa-r-chip:    8px;
  --fa-r-pill:  999px;

  /* ---- spacing: 4px grid, unchanged ---- */
  --fa-s-1: 4px;  --fa-s-2: 8px;  --fa-s-3: 12px; --fa-s-4: 16px;
  --fa-s-5: 20px; --fa-s-6: 24px; --fa-s-8: 32px; --fa-s-10: 40px;

  /* ---- type: Geist, the system's UI face ---- */
  /* -apple-system stays at the end, so a device without Geist looks exactly
     as it did before rather than falling back to something worse. */
  --fa-font: "Geist", "Inter", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --fa-font-num: "Geist Mono", "Geist", ui-monospace, -apple-system, system-ui, sans-serif;

  --fa-t-score:     44px;
  --fa-t-display:   40px;
  --fa-t-title1:    28px;
  --fa-t-title2:    22px;
  --fa-t-headline:  17px;
  --fa-t-body:      15px;
  --fa-t-footnote:  13px;
  --fa-t-caption:   11px;

  --fa-w-regular: 400; --fa-w-medium: 500; --fa-w-semi: 600; --fa-w-bold: 700; --fa-w-heavy: 800;
  --fa-ls-caption: .08em;
  --fa-ls-display: -.02em;

  /* ---- component sizes ---- */
  --fa-crest-row:   28px;
  --fa-crest-hero:  64px;
  --fa-avatar:      36px;
  --fa-avatar-lg:  120px;
  --fa-touch:       44px;
  --fa-tabbar:      83px;
}

/* ------------------------------------------------------------
   Dark. Three states, as before: an explicit choice stamps
   data-theme; the default "system" setting stamps nothing, and only
   prefers-color-scheme separates light from dark there. So the media query
   is guarded against an explicit LIGHT choice, and the [data-theme="dark"]
   block below repeats the values so the toggle wins in both directions.
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fa-bg:            #17171a;  /* warm dark, not OLED black */
    --fa-surface:       #1f1f23;
    --fa-surface-2:     #26262b;
    --fa-ink:           #f4f3f0;
    --fa-ink-2:         #d6d5d1;
    --fa-muted:         #91908f;
    --fa-hairline:      #2b2b30;
    --fa-dotted:        #35353b;
    --fa-primary:       #f4f3f0;  /* ink inverts; it is still the only one */
    --fa-primary-weak:  #3a352c;  /* dune, in the dark */
    --fa-live:          #ff6b6b;
    --fa-live-weak:     #3a1f1d;
    --fa-win:           #4cc98a;
    --fa-draw:          #45454b;
    --fa-loss:          #e0705c;
    --fa-gold:          #d9a520;
    --fa-pitch:         #3f9e6d;
    --fa-pitch-line:    #5fae86;
    --fa-shadow-card:  0 2px 8px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
    --fa-shadow-sheet: 0 18px 50px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .4);
  }
}

:root[data-theme="dark"] {
  --fa-bg:            #17171a;
  --fa-surface:       #1f1f23;
  --fa-surface-2:     #26262b;
  --fa-ink:           #f4f3f0;
  --fa-ink-2:         #d6d5d1;
  --fa-muted:         #91908f;
  --fa-hairline:      #2b2b30;
  --fa-dotted:        #35353b;
  --fa-primary:       #f4f3f0;
  --fa-primary-weak:  #3a352c;
  --fa-live:          #ff6b6b;
  --fa-live-weak:     #3a1f1d;
  --fa-win:           #4cc98a;
  --fa-draw:          #45454b;
  --fa-loss:          #e0705c;
  --fa-gold:          #d9a520;
  --fa-pitch:         #3f9e6d;
  --fa-pitch-line:    #5fae86;
  --fa-shadow-card:  0 2px 8px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
  --fa-shadow-sheet: 0 18px 50px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .4);
}