/* FC-Tracker · Draft 2 – design tokens.
   Three themes: light, dark, glass (dark glass, the favourite). A theme is a token set on
   [data-theme] – on :root for the page, or on any element to force a theme for a subtree
   (the type specimen, index thumbnails). Components use these variables only. */


:root {
  /* ---------- brand (identical in every theme) ---------- */
  --red: #EF4359;          /* the brand and the one action colour */
  --red-press: #D8324B;
  --mint: #2FD6A8;         /* done / owned – nothing else */
  --amber: #F5B03B;        /* problems – never red */
  --coin: #D9A93A;         /* the FUT coin glyph only – an icon, not a status colour */
  --coin-rim: #9C7417;
  --on-fill-key: rgba(255, 255, 255, .22); /* keycap on a red button */

  /* ---------- type ---------- */
  /* Saira (width axis): display at 87.5 %, numbers at 75 %. Barlow: body and UI text. */
  --f-display: "Saira", "Barlow", system-ui, sans-serif;
  --f-num: "Saira", "Barlow", system-ui, sans-serif;
  --f-body: "Barlow", system-ui, sans-serif;
  --display-stretch: 87.5%;
  --num-stretch: 75%;
  --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px;
  --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px;
  --fs-40: 40px; --fs-48: 48px; --fs-64: 64px; --fs-80: 80px; --fs-120: 120px; --fs-180: 180px;

  /* ---------- space: 4-pt grid ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px;

  /* ---------- the cut corner (top-left + bottom-right folded in) ---------- */
  --cut-xs: 3px;   /* keycaps, tiny tags, progress */
  --cut-s: 5px;    /* chips, session tabs, small buttons, grade tags */
  --cut-m: 8px;    /* buttons, rows, inputs, toasts */
  --cut-l: 20px;   /* panels, tiles */
  --cut-xl: 32px;  /* hero panels, windows */

  /* ---------- motion ---------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 120ms;
  --t-med: 220ms;
  --t-slow: 420ms;

  /* the real game behind the glass (the user's own FC 27 screenshots) */
  --game: url("/img/game-future-stars.jpg");   /* the user's own FC 27 screenshot (Future Stars) */
  --game-gallery: url("/img/game-gallery.jpg");
  --game-floor: #0D0C10;     /* behind the game screenshot on over-the-game screens */
}

/* ========================================================= LIGHT */
:root[data-theme="light"], [data-theme="light"] {
  color-scheme: light;
  --bg: #F3F1EC;              /* warm stone paper */
  --bg-stage: #F3F1EC;
  --surface: #FFFFFF;          /* panels */
  --surface-dense: #FFFFFF;
  --surface-hero: #FFFFFF;
  --tab-on-bg: #15120F; --tab-on-fg: #FFFFFF;
  --surface-2: #F9F7F3;        /* nested blocks */
  --fill: #EEEAE2;             /* chips, tracks, keycaps */
  --fill-hover: #E5E3DF;
  --sel: #EEEAE2;              /* selected row: a neutral fill (never a red tint) */
  --line: #E2DCD1;             /* warm hairline */
  --line-strong: #CEC6B8;
  --ink: #15120F;              /* warm black: the strongest surface */
  --neutral: #131217;          /* neutral solid tag (lower-thirds): ink in light, a raised grey in the dark themes */
  --active-bg: #15120F;        /* the active session tab / current rank: ink in light … */
  --active-fg: #FFFFFF;
  --active-ring: #131217;
  --on-ink: #FFFFFF;
  --text: #15120F;
  --text-2: #4F4A44;
  --text-3: #6B655D;          /* 5:1 on white */
  --accent: var(--red);
  --accent-text: #C8233C;      /* red text on white: 5.2:1 */
  --on-accent: #FFFFFF;
  --done: #1FBF92;             /* deeper mint on warm paper */
  --done-text: #0E8A69;
  --done-wash: #E3F7F0;
  --warn: var(--amber);
  --warn-text: #8F5B00;
  --warn-wash: #FDF2DD;
  --track: #E7E5E1;
  --blur: none;
  /* elevation: light is edges and clean, short shadows – nothing glows */
  --lift-1: drop-shadow(0 1px 1px rgba(19, 18, 23, .05)) drop-shadow(0 2px 6px rgba(19, 18, 23, .04));
  --lift-2: drop-shadow(0 2px 3px rgba(19, 18, 23, .06)) drop-shadow(0 12px 28px rgba(19, 18, 23, .10));
  --card-shadow: drop-shadow(0 1px 1px rgba(19, 18, 23, .18)) drop-shadow(0 10px 14px rgba(19, 18, 23, .16));
  --plinth: linear-gradient(180deg, #EDE7DC, #E4DCCE); /* the one warm studio floor behind a hero card */
  --sweep-wall: #F7F3EB; --sweep-floor: #E9E2D5;
  --ph-edge: brightness(0) opacity(.2);
  --ph-fill: brightness(0) invert(1);           /* product-shot floor behind hero cards */
  --pitch: #EBE6DC;            /* a warm stone pitch so the cards pop */
  --pitch-line: #D5CEC1;
  --scrim: rgba(19, 18, 23, .32);
}

/* ========================================================= DARK (solid) */
:root[data-theme="dark"], [data-theme="dark"] {
  color-scheme: dark;
  --bg: #110D10;
  --bg-stage: #110D10;
  --surface: #1A1619;
  --surface-dense: #1A1619;
  --surface-hero: #241E22;
  --tab-on-bg: #2E272C; --tab-on-fg: #F2F1F4;
  --surface-2: #211C20;
  --fill: #2A2428;
  --fill-hover: #2D2C34;
  --sel: #2A2428;
  --line: #2E282C;
  --line-strong: #3E373C;
  --ink: #F2F1F4;
  --neutral: #34333B;
  --active-bg: #322B30;        /* … a raised surface with a light ring in the dark themes – no white slabs */
  --active-fg: #F2F1F4;
  --active-ring: #8E8C95;
  --on-ink: #0E0D11;
  --text: #F2F1F4;
  --text-2: #ADABB4;
  --text-3: #908E97;
  --accent: var(--red);
  --accent-text: #FF6B7D;
  --on-accent: #FFFFFF;
  --done: var(--mint);
  --done-text: #4FDDB6;
  --done-wash: #11271F;
  --warn: var(--amber);
  --warn-text: #FFC35C;
  --warn-wash: #2B2112;
  --track: #2A2930;
  --blur: none;
  --lift-1: none;
  --lift-2: drop-shadow(0 16px 32px rgba(0, 0, 0, .5));
  --card-shadow: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)) drop-shadow(0 10px 16px rgba(0, 0, 0, .45));
  --plinth: #141318;
  --sweep-wall: #19151A; --sweep-floor: #141014;
  --ph-edge: brightness(0) invert(1) opacity(.2);
  --ph-fill: brightness(0) invert(.1);
  --pitch: #141318;
  --pitch-line: #2A2930;
  --scrim: rgba(0, 0, 0, .6);
}

/* ========================================================= DARK GLASS (favourite) */
/* Honest frosted panels over the real game: blur + a hairline rim. No glow, no gradients rims. */
:root, :root[data-theme="glass"], [data-theme="glass"] {
  color-scheme: dark;
  --bg: #0D0C10;
  --bg-stage:
    linear-gradient(rgba(10, 9, 13, .62), rgba(10, 9, 13, .74)),
    var(--game) center / cover no-repeat,
    #0D0C10;
  --surface: rgba(18, 16, 22, .2);         /* standard tier – the game shows through */
  --surface-hero: rgba(20, 18, 24, .34);   /* the lit / focused tile */
  --surface-dense: rgba(18, 17, 23, .44);  /* dense tier: text-heavy tables */
  --tab-on-bg: rgba(255, 255, 255, .12); --tab-on-fg: #F4F3F6;
  --surface-2: rgba(255, 255, 255, .045);
  --fill: rgba(255, 255, 255, .08);
  --fill-hover: rgba(255, 255, 255, .12);
  --sel: rgba(255, 255, 255, .09);
  --line: rgba(255, 255, 255, .2);
  --line-strong: rgba(255, 255, 255, .22);
  --ink: #F4F3F6;
  --neutral: rgba(255, 255, 255, .16);
  --active-bg: rgba(255, 255, 255, .14);
  --active-fg: #F4F3F6;
  --active-ring: rgba(255, 255, 255, .55);
  --on-ink: #0D0C10;
  --text: #F4F3F6;
  --text-2: rgba(244, 243, 246, .72);
  --text-3: rgba(244, 243, 246, .6);
  --accent: var(--red);
  --accent-text: #FF6B7D;
  --on-accent: #FFFFFF;
  --done: var(--mint);
  --done-text: #5BE3BE;
  --done-wash: rgba(47, 214, 168, .13);
  --warn: var(--amber);
  --warn-text: #FFC766;
  --warn-wash: rgba(245, 176, 59, .14);
  --track: rgba(255, 255, 255, .12);
  --blur: blur(26px) saturate(140%);
  --lift-1: none;              /* a filter would break the backdrop blur – glass floats by its rim */
  --lift-2: none;
  --card-shadow: none;         /* a filter inside a frosted panel renders as a dark box in Chrome – glass cards float without one */
  --plinth: rgba(255, 255, 255, .04);
  --sweep-wall: rgba(255, 255, 255, .03); --sweep-floor: rgba(0, 0, 0, .25);
  --ph-edge: brightness(0) invert(1) opacity(.26);
  --ph-fill: brightness(0) invert(.12) opacity(.9);
  --pitch: rgba(18, 26, 24, .5);
  --pitch-line: rgba(255, 255, 255, .12);
  --scrim: rgba(0, 0, 0, .55);
}

/* ================================================================ grades & ranks
   FC 27's own colours, measured from the user's screenshots (PRINCIPLES §16 "game colours").
   Grades: shorts/public/img/rewards.png (the Gallery "Rewards" ladder D C B A S, 2879×1799) and
   shorts/public/v/gtour.mp4 @10.5 s (Rarities overview). Ranks: fixtures/champions/hub-4-4.webp (2000×1250).
   The game draws a grade as a badge: a dark tinted diamond, a 45° rim lit on the top edges and
   shaded on the bottom edges, and a bevelled letter (light face, deep side). S has a second diamond.
   The badge looks the same in every theme (it is game art); only the loose letter in "→ B" changes
   per theme so it keeps ≥3:1 on light paper. */
:root {
  /* face = the letter's front face / lit rim · deep = the letter's side / shaded rim · fill = inside */
  --gr-d: #C37C58; --gr-d-deep: #B54900; --gr-d-fill: #130B08;
  --gr-c: #B2C8C8; --gr-c-deep: #697D7C; --gr-c-fill: #0B1110;
  --gr-b: #E5CB83; --gr-b-deep: #B59B52; --gr-b-fill: #161108;
  --gr-a: #02DEDE; --gr-a-deep: #126262; --gr-a-fill: #051110;
  --gr-s: #CDA9FE; --gr-s-deep: #935ADE; --gr-s-fill: #160C23;

  /* Champions ladder shields. got = a rank reached, open = not reached yet.
     H4 = fixtures/champions/hub-4-4.webp · H0 = hub-0-0-before-start.webp (2000×1125, sharper, all 15 open)
     E1 = reward-elite-1-coins-tokens.webp (2000×1125, the Elite I shield earned, ~130 px) */
  --rank-got-fill: #6A0906;     /* Contender reached: flat red (H4 cluster 37 %, x242 y530) */
  --rank-got-shade: #4E0401;    /* its shaded right half (H4) */
  --rank-got-ink: #DCA467;      /* its gold numeral (H4 x355 y528) */
  --rank-open-fill: #0C0C0C;    /* not reached: black shield (H0 x355 y470) – H4 read #060805 */
  --rank-open-rim: #888588;     /* its grey rim (H0 cluster 42 %, x242 y465) – H4 read #888885 */
  --rank-open-ink: #898989;     /* its grey numeral (H0 x355 y461) */
  --rank-next: #42E899;         /* the ▼ over the rank being played for: green→teal, centre (H0 x242 y402; top #36E089, tip #4AE5CF) */
  --rank-crest: #56130A; --rank-crest-gold: #E6C368; /* the Champions "C" crest at the start of the ladder (H0 x130 y470) */
  --rank-track-got: #D1D0CC;    /* the track between reached shields (H0 x183 y471, 8 px tall on 2000 px) */
  --rank-track: rgba(255, 255, 255, .27); /* the track ahead: H0 #574544 over #1A0908 = white at ≈27 % */
  /* Elite reached (E1): a red-to-black shield (left half lit, right half shaded), a gold rim + inner line,
     a gold numeral, gold fins and laurel – a different look from Contender's flat red */
  --rank-e-top: #670805;        /* E1 x165 y198 */
  --rank-e-bottom: #000000;     /* E1 x165 y268 */
  --rank-e-shade-top: #7F1311;  /* E1 x200 y198 */
  --rank-e-shade-bottom: #271A1A; /* E1 x200 y268 */
  --rank-e-gold: #D9B76A;       /* rim, fins, laurel (E1 cluster; rim x165 y293 #DFB568) */
  --rank-e-ink: #D7B668;        /* the numeral (E1 x182 y235, cluster 15 %) */
  /* Champion reached (V–I). SOURCE: web screenshots, not the user's own – fixtures/round8/hub-champion-reached-es.png
     (+ -ru.png), 739×415 JPEG with Champion V–I reached. In the same frame Champion's fill reads like Contender's
     (Contender x83 y179 #400207, Champion x295 y179 #4D0001 – the JPEG is darker than H4), so the fill stays Contender's
     measured red; what differs is a light-gold rim and fins (x287 y169 #E5C19D, fin x285 y175 #F7E4C6, top x298 y160
     #C8967D) where Contender has a dark red rim (x79 y169 #5D3335), and a brighter numeral (x299 y171 #D79863 vs
     Contender's x90 y172 #C68454). */
  --rank-got-fill-p: #6A0906;   /* = Contender's fill (equal in the web screenshot) */
  --rank-got-rim-p: #E5C19D;    /* gold rim + fins (ES x287 y169) */
  --rank-got-ink-p: #D79863;    /* numeral (ES x299 y171) */

  /* FUT coins and the Champions token (E1): our own flat glyphs that read like the game's, never EA's art.
     Coin: a gold ring, a black face, gold lettering (big coin: ring x890 y605, face x952 y571, letters x917 y605) */
  --coin: #D8BD77;              /* the ring – overrides the old flat #D9A93A at the top of this file */
  --coin-rim: #C9BC81;          /* the thin gold inner ring / lettering on the face */
  --coin-face: #252525;
  /* Champions token: a red disc, a darker edge, a thin gold ring and a gold angular C (clusters 11 % / 11 %; edge x180 y600) */
  --token: #C92B2A; --token-edge: #6C1313; --token-gold: #E6C488;
  /* Gallery token (shorts/public/img/rewards.png "5 Gallery Token", x2165 y1047): a purple coin – ring #663B86,
     disc #593676, face #372548 – with a mint gem, light half #A8E4D5, shaded half #1F5D47. Another currency. */
  --gtoken-ring: #663B86; --gtoken: #593676; --gtoken-face: #372548; --gtoken-gem: #A8E4D5; --gtoken-gem-shade: #1F5D47;

  /* a loose grade letter ("→ B") on dark surfaces: the face colour */
  --gr-d-text: var(--gr-d); --gr-c-text: var(--gr-c); --gr-b-text: var(--gr-b); --gr-a-text: var(--gr-a); --gr-s-text: var(--gr-s);
}
/* light paper: the face colours are too pale (B 1.5:1), so the letter takes the measured deep tone
   (on white: D #B54900 5.4:1 · C #697D7C 4.4:1 · B #93803F – B's darkest measured side, 3.9:1 · A #126262 7.1:1 · S #935ADE 4.4:1) */
:root[data-theme="light"], [data-theme="light"] {
  /* the game has no light theme: on paper the track ahead is a hairline and the reached track the grey of text-3 */
  --rank-track: var(--line-strong); --rank-track-got: var(--text-3);
  --gr-d-text: var(--gr-d-deep); --gr-c-text: var(--gr-c-deep); --gr-b-text: #93803F; --gr-a-text: var(--gr-a-deep); --gr-s-text: var(--gr-s-deep);
}
:root[data-theme="dark"], [data-theme="dark"], :root[data-theme="glass"], [data-theme="glass"] {
  --rank-track: rgba(255, 255, 255, .27); --rank-track-got: #D1D0CC;
  --gr-d-text: var(--gr-d); --gr-c-text: var(--gr-c); --gr-b-text: var(--gr-b); --gr-a-text: var(--gr-a); --gr-s-text: var(--gr-s);
}