/* Tokens that are NOT club branding, plus the gradients composed from the ones that are.

   The club's own colors — brand, surfaces, ink, logo — no longer live here. They come from
   ClubTheme (src/FootballFormation.UI/Theming/ClubTheme.cs), which emits them as CSS custom
   properties into the document head AND builds MudBlazor's palette, so the two can no longer
   disagree. Re-theming for another club means editing that record and nothing else.

   Everything below is either club-independent (semantic status colors, position fit) or purely
   derived from a club token via var(), so it stays in CSS where it is read.

   Derived shades are made where they are used via
   color-mix(in srgb, var(--token) N%, transparent) instead of separate
   tokens per alpha level. Muted *text* is the exception — see the ink ramp below. */

:root {
    /* --- Muted text ---
       Secondary text used to be written inline as color-mix(in srgb, var(--ink) 45%, transparent)
       and friends, with the percentages inherited from the old dark theme. On the light theme
       those mixes fail WCAG: against white, 45% ink measured about 2.8:1, 35% about 2.1:1 and 25%
       about 1.6:1, where AA wants 4.5:1 for body text and 3:1 for large or secondary text.

       Named tokens instead of repeated percentages, so the next adjustment is one edit rather than
       a sweep of thirty rules. Ratios computed for #182b1f over #ffffff:
         --ink-muted   4.8:1  clears AA for body text — dates, subtitles, captions, table headers
         --ink-subtle  3.9:1  clears AA for large/secondary text — empty states, quieter labels
         --ink-faint   3.3:1  clears AA for non-text contrast — icons, dividers, placeholder glyphs
       Small text carrying meaning uses --ink-muted. Recompute these if --ink or --surface-page
       changes for another club; the percentages are tuned to this pair, not universal. */
    --ink-muted: color-mix(in srgb, var(--ink) 65%, transparent);
    --ink-subtle: color-mix(in srgb, var(--ink) 58%, transparent);
    --ink-faint: color-mix(in srgb, var(--ink) 52%, transparent);

    /* Semantic (club-independent, but centralized all the same) */
    --color-guest: #a855f7;
    --color-guest-bright: #7e22ce;
    --color-danger: #ef4444;
    --color-danger-bright: #dc2626;
    --color-success-bright: #15803d;
    /* For success text on a tint of itself: the -bright green measures 3.7:1 over the badge fill, under AA. */
    --color-success-deep: #14532d;
    --color-warning: #f59e0b;
    --color-warning-bright: #b45309;
    /* Away-game accent; home uses the club green. The -bright pair is the readable one, like every
       other semantic colour here: the plain blue reads against a 12% tint of itself on the venue
       badge, where it measures 4.02:1 — under AA, and the tint is what does it, not the card. */
    --color-away: #2563eb;
    --color-away-bright: #1d4ed8;

    /* Position fit — the five tiers, used by the pitch chips, the builder's legend and the
       playing-time dots. Deliberately not club colors: green-to-red reads as good-to-bad
       everywhere, and the chips sit on a green pitch that no palette changes. */
    --fit-preferred: #1b5e20;
    --fit-preferred-edge: #4caf50;
    --fit-natural: #388e3c;
    --fit-natural-edge: #81c784;
    --fit-alternative: #1565c0;
    --fit-alternative-edge: #42a5f5;
    --fit-compatible: #e65100;
    --fit-compatible-edge: #ff9800;
    --fit-out-of-position: #b71c1c;
    --fit-out-of-position-edge: #ef5350;

    /* Shared gradients, composed from the club tokens above */
    --gradient-primary: linear-gradient(135deg, var(--club-primary), var(--club-primary-deep));
    --gradient-accent: linear-gradient(135deg, var(--club-accent), var(--club-accent-deep));
    --gradient-card: linear-gradient(135deg, var(--surface-card), var(--surface-card-alt));
    --gradient-appbar: linear-gradient(to right, var(--surface-appbar), var(--surface-appbar-alt));
}