/* Courtside — design tokeny pro web.
 *
 * Jediná kopie hodnot pro celou doménu; stránky (/, /privacy/, /delete-account/) ji
 * linkují a vlastní `:root` nedrží. Do rozdělení měla každá stránka svůj blok a všechny
 * tři se po revizi návrhového systému rozešly s aplikací — podklad zůstal o stupeň
 * světlejší a okraj karty nesl roli, kterou appka používá na dělicí linky.
 *
 * Zdroj pravdy hodnot je `:core:designsystem` (docs/DESIGN_SYSTEM.md); tenhle soubor je
 * jejich odvozený export, stejně jako ds-bundle/styles.css pro Claude Design. Jména rolí
 * se drží M3, ať se token dá dohledat v obou směrech.
 */

/* Písmo je **naše, ne z Google Fonts**. Odkaz na cizí doménu blokoval vykreslení skoro
 * vteřinu (Lighthouse) a stránka, která slibuje „no tracking", by po cestě sahala na Google.
 * Soubory staví `tools/fonts/build.mjs` z týchž TTF, jaké bundluje aplikace.
 *
 * `swap` je tu podstatný: text se vysází fallbackem hned a přepíše se, jakmile písmo dorazí —
 * jinak by na ně čekal nadpis, který je na téhle stránce největším vykresleným prvkem.
 */
@font-face {
  font-family: "Roboto Flex";
  src: url("/fonts/roboto-flex.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("/fonts/roboto-mono.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}

:root {
  /* Akcent — nese tvoji akci a výběr, vítěze zápasu a tvoji kvótu. Nikdy živé dění. */
  --primary: #BCEF4D;
  --on-primary: #20290A;
  --primary-container: #36421A;
  --on-primary-container: #D7F88E;

  /* Neutrální rampa — vrstvení plochy řeší tonální role, ne stíny. */
  --background: #090B0A;
  --on-background: #E2E3DF;
  --surface: #0E1110;
  --surface-container-lowest: #0E1110;
  --surface-container-low: #121514;
  --surface-container: #1A1E1C;
  --surface-container-high: #242826;
  --surface-container-highest: #2F3331;
  --on-surface: #E2E3DF;
  --on-surface-variant: #BFC5BF;
  --outline: #899189;
  --outline-variant: #2E3431;

  /* Okraj karty. Vlastní role, ne --outline-variant: ta kreslí dělicí linky. */
  --card-border: #121514;

  /* Živé dění — hue schválně daleko od akcentu i od chybové červené. */
  --live: #FF6B35;
  --on-live: #2A0E00;
  --live-container: #3C1709;
  --on-live-container: #FFD8C2;

  /* Data a informace, „žádá pozornost", „akce prošla", chyba. Každá role má i svůj
     kontejner — chip a štítek jedou na dvojici container + on-container, samotné
     `--info` / `--warning` / `--success` / `--error` nese text, číslo nebo pruh. */
  --info: #8FB8FF;
  --on-info: #0A2A52;
  --info-container: #1B2C44;
  --on-info-container: #D2E2FF;
  --warning: #EFC75E;
  --on-warning: #392A00;
  --warning-container: #4A3A0C;
  --on-warning-container: #F8E3AB;
  --success: #6FD08C;
  --on-success: #06371C;
  --success-container: #1E4D30;
  --on-success-container: #B7F2C6;
  --error: #FFB4AB;
  --on-error: #690005;
  --error-container: #93000A;
  --on-error-container: #FFDAD6;

  /* Povrch kurtu a okruh — nese je pilulka na kartě turnaje. */
  --court-clay: #E07A4E;
  --court-grass: #3E7D3A;
  --court-hard: #2E6DA4;
  --court-carpet: #9B7BD4;
  --tour-atp-container: #103833;
  --on-tour-atp-container: #A8EFE2;
  --tour-wta-container: #40182D;
  --on-tour-wta-container: #FFD6E9;

  /* Kreslicí detail mimo M3 role: švy na tenisáku indikátoru podání. */
  --serve-seam: #616161;

  /* Spacing (8dp škála) a vláska. `--label-gap` je sémantický token mimo škálu —
     mezera mezi titulkem a jeho podtitulkem. */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 48px;
  --label-gap: 6px;
  --hairline: 1px;

  /* Tvary. Karty mají vlastní token o stupeň níž než škála; stav má vlastní tvrdý
     blok, aby se od zaoblených metadat lišil tvarem. */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-card: 10px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-status: 4px;
  --radius-circle: 50%;
  --radius-swatch: 25%;

  /* Písmo. Obojí servírujeme z vlastní domény (`@font-face` nahoře); fallback je
     systémový, aby stránka dala text i než soubor dorazí. */
  --font-sans: "Roboto Flex", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Typografické stupně. Zkratka `font` nese váhu, velikost, řádkování a rodinu naráz;
     letter-spacing se do ní nevejde a patří ke komponentě, která styl používá.
     Přeneseno z `ds-bundle/styles.css` — přenáší se jen to, co doména skutečně sází. */
  --type-headline-small: 600 26px/34px var(--font-sans);
  --type-title-large: 500 24px/30px var(--font-sans);
  --type-title-medium: 500 18px/26px var(--font-sans);
  --type-body-medium: 400 15px/22px var(--font-sans);
  --type-body-small: 400 13px/18px var(--font-sans);

  /* Mono nese čísla, stav a údaje popisující věc zvenčí. S `tnum` u všeho, co se
     aktualizuje — jinak čísla při změně mění šířku a řádek poskakuje. */
  --type-score: 600 25px/27px var(--font-mono);
  --type-row-score: 600 18px/22px var(--font-mono);
  --type-row-name: 600 16px/22px var(--font-sans);
  --type-match-row-score: 600 17px/20px var(--font-mono);
  --type-match-row-name: 500 16px/22px var(--font-sans);
  --type-card-meta: 500 12px/16px var(--font-mono);

  /* Stupně nesoucí vlastní rozhodnutí, ne jen místo ve škále. Tracking u každého
     v komentáři — komponenta si ho dopíše. */
  --type-status: 700 11px/14px var(--font-mono);        /* stav, tracking .08em */
  --type-section-title: 700 12px/16px var(--font-mono); /* hlavička sekce, tracking .12em */
  --type-pill-label: 700 12px/17px var(--font-mono);    /* popisek pilulky */
  --type-button-label: 600 15px/20px var(--font-sans);  /* popisek tlačítka */
  --type-control: 500 14px/18px var(--font-sans);       /* přepínač, taby, odkaz v navigaci */
  --type-micro-label: 700 10px/12px var(--font-mono);   /* jmenovka nad hodnotou, tracking 1px */
}