/* ============================================================
   site-palette.css — PALETA SITE-ULUI.

   A fost `skin-modern.css`, skinul opt-in al paginii de eveniment (B158, ADR 0054). Rollout-ul B159
   l-a dus pagina cu pagina pe tot site-ul, iar B159 L10 i-a coborat TOATE regulile in foile de
   audienta (`@layer app`). Ce a ramas — si e tot ce a contat pana la urma — sunt cele doua blocuri de
   TOKENI. Fisierul si-a luat numele care spune ce face.

   DOUA LUMI DE RANDARE, si de-aia paleta asta sta separat:
    · SITE-ul incarca fisierul asta, ULTIMUL din lant (base.html.twig + cele patru documente
      standalone: login si cele trei pagini de eroare);
    · ECRANUL JURATULUI nu-l incarca deloc (tokens.css + judge.css + base-layout.css) si isi pastreaza
      paleta lui. Componentele partajate cu el — `.btn-ink*`, `.brand-modal*`, campurile de formular,
      stepperul de confirmare — citesc tokeni de ROL: `tokens.css` le da valoarea juratului pe `:root`,
      iar blocurile de aici o suprascriu pentru site.
      ⚠️ Nu muta blocurile astea in `tokens.css`: acolo le-ar mosteni si juratul.

   NELAYERIZATE, inadins: remapeaza roluri declarate si in `@layer tokens` din `tokens.css`
   (`--c-kf-*`), pe care un layer ulterior le-ar bate. Ordinea `<link>` le pune dupa remap-ul
   nelayerizat din `tokens.css` — vezi contractul din ADR 0023.

   De unde vine directia: docs/DESIGN_RESEARCH.md + deciziile ownerului, pastrate in ADR 0054.
   ============================================================ */

@layer vendor, app, tokens, base, layout, components, utilities;

/* ── 1. TOKENI ──────────────────────────────────────────────────────────────────────────
   Contrast măsurat (WCAG 2.x) pe fiecare pereche folosită — lista e în contrast-audit.php
   (SKIN_MODERN_PAIRS). Cifrele din comentarii sunt calculate, nu estimate. */
:root {
  /* ==== SKINUL (ADR 0063) — rolurile de culoare, cu VALOAREA lor pe tema deschisă ====
     Componentele citesc DOAR rolurile `--ui-*`. Un skin nou = blocul ăsta + blocul de roluri de pe tema închisă, nimic altceva.
     Rostul fiecărui rol: scripts/css-roles/roles.json (garda RoleTokensDeclaredTest cere ca fiecare rol din inventar să fie
     declarat aici, în ordinea lui). Stările `--ui-pressed` și `--ui-zebra` se CALCULEAZĂ din roluri (strat de stare Material 3)
     și se re-rezolvă singure pe fiecare temă. Cifrele de contrast sunt măsurate (contrast-audit.php), nu estimate. */
  /* ROLURI:START */
  /* ⚠️ B234 (2026-10-09): valorile de mai jos sunt skinul ARENA (`docs/arena/arena.css`, Claude Design), aplicat cu `skin.py apply`.
     Cifrele de contrast din notele rolurilor sunt ale skinului ANTERIOR (B226-B228) — rostul fiecărui rol rămâne, cifrele nu.
     Sursa de adevăr pentru contrast e `scripts/contrast-audit.php` (rulat de gate), nu notele. */
  /* Adâncimi. B226 (2026-10-07, alegerea ownerului): pagina `#e8eae1` — alb pe ea 1.21 (`#f3f4ef` stătea la 1.10 și pe telefon
     totul părea alb); B230 faza 6 (testul drumului scurt, alegerea ownerului „c-adânc"): o treaptă mai jos, `#e0e2d9` — alb pe ea 1.31,
     iar ce atinge pagina (șina, insignele, firul) coboară cu ea. Fără rame (ADR 0057 §4): o cutie se desprinde prin treaptă tonală + umbră. Pe deschis cardul e alb, umbra
     face treaba, iar benzile din card (`--ui-sunken`: totalul de puncte, legenda, cutiile de categorii) coboară o treaptă. Ce
     ATINGE pagina se desprinde de ea (cast-ui §3): obiectul pus pe pagină ia tonul cardului; banda lipită de marginea cardului
     (`--ui-edge-band`, șina datei) diferă de amândouă (1.24 / 1.62); ce stă pe o zonă gri urcă o treaptă (`--ui-lifted`: cipul de
     înscris, 1.33 pe cutie / 1.31 pe pagină). B228: `--ui-quiet` = umplerea liniștită (buton tonal, avatar neutru, insignă de
     stare, capul scorecard-ului). B228.2: cu Arena placa `.cl-cat` e albă pe deschis, deci remapul ei pe `--ui-lifted` (alb pe alb)
     a plecat — cipul, avatarul și insignele stau pe `--ui-quiet`. `--ui-lifted` n-are azi cititori; rămâne în contractul de skin
     (`scripts/css-roles/roles.json`). `--ui-flat` / `--ui-subtle` = de unificat. */
  --ui-page: #ececea;
  --ui-raised: #ffffff;
  --ui-flat: #ffffff;
  --ui-sunken: #e3e3df;
  --ui-subtle: #e3e3df;
  --ui-subtle-rgb: 227, 227, 223;   /* același, ca triplet — puntea Bootstrap `.bg-light` */
  --ui-quiet: #d0d0cb;
  --ui-quiet-rgb: 208, 208, 203;    /* același, ca triplet — variabilele RGB ale badge-urilor Bootstrap */
  --ui-edge-band: #0a0a0b;
  --ui-lifted: #ffffff;
  --ui-overlay: #0a0a0b;
  /* Elevație: pe deschis umbrele se văd (NN/g „Flat 2.0"); pe închis o umbră neagră pe pagină aproape neagră nu se vede, deci
     acolo ridicarea o duc suprafața (o treaptă mai deschisă) și muchia de lumină. */
  --ui-shadow-raised: 0 0 0 1px rgb(10 10 11 / .07);
  --ui-shadow-float: 0 12px 32px rgb(10 10 11 / .18);
  /* Text: cerneala 13.81 pe pagină · 18.07 pe alb; textul secundar 8.37 pe alb · 5.17 pe `--ui-quiet`. Blocul INVERS =
     umplere în culoarea cernelii (insigna de categorie sub cursor, contoarele). */
  --ui-ink: #0a0a0b;
  --ui-ink-rgb: 10, 10, 11;
  --ui-ink-muted: #4a4a52;
  --ui-inverse: #0a0a0b;
  --ui-on-inverse: #ffffff;
  --ui-on-color: #ffffff;
  /* Linii: `--ui-line` = graniță CU SENS (câmpuri, butoane conturate; 4.25 pe alb · 3.24 pe pagină · 3.20 pe `--ui-subtle`);
     `--ui-hair` = despărțitor fin (linia de sub taburi 1.24 pe pagină); `--ui-edge` = conectorii nerezolvați, decor (1.82 pe alb).
     Rama decorativă a cardului e stinsă (`--ui-frame`); doar stratul plutitor își păstrează marginea. */
  --ui-line: #74747c;
  --ui-hair: #d6d6d1;
  --ui-edge: #b4b4ae;
  --ui-frame: transparent;
  --ui-float-edge: #b4b4ae;
  --ui-focus: #8e24e0;
  /* Identitate (ADR 0057, G1b — ownerul: „violetul apare cam deschis față de logo… font negru pe mov"): violetul fulgerului din
     logo. TEXTUL e un ton (6.04 pe alb · 4.61 pe pagină), UMPLEREA e tonul saturat al brandului, aceeași pe ambele teme, cu text
     alb (6.04, hover 7.55). Butonul PLIN = umplerea de identitate; conturatele și fantomele rămân neutre. */
  --ui-accent: #7a1bc4;
  --ui-accent-fill: #8e24e0;
  --ui-accent-fill-hover: #7a1bc4;
  --ui-on-accent-fill: #ffffff;
  --ui-on-accent-fill-muted: #eedefa;
  --ui-accent-tint: #f1e6ff;
  /* Sens. LIME = „a câștigat / a avansat": pe deschis lime-ul e DOAR umplere (pe alb 1.18), deci marcajele subțiri și textul iau
     olive (`--ui-win-ink`). Verdictul (`--ui-win`) umple latura câștigătoare, cerneala pe el 15.28; treapta adâncă
     (`--ui-win-deep`) e căsuța scorului câștigător (5.52). Învinsul are umplere PROPRIE (`--ui-lose`: 1.61 pe card, text 5.21).
     LIVE = roșu, cu cuvântul scris; ca linie / punct (`--ui-live-mark`) urcă pe scara tonală pe închis. Confirmarea neutră
     (`--ui-ok`) nu e lime: lime-ul rămâne rezultatul. */
  --ui-win: #c8ff00;
  --ui-on-win: #0a0a0b;
  --ui-win-deep: #4d6600;
  --ui-win-ink: #4a6200;
  --ui-win-mark: #4d6600;
  --ui-win-fill: #c8ff00;
  --ui-on-win-fill: #0a0a0b;
  --ui-qualified-tint: #eef5d6;
  --ui-win-tint: rgb(200 255 0 / .38);
  --ui-lose: #d0d0cb;
  --ui-on-lose: #4a4a52;
  --ui-live: #c62828;
  --ui-on-live: #ffffff;
  --ui-live-tint: #f5d3cd;
  --ui-live-mark: #c62828;
  --ui-on-live-mark: #ffffff;
  --ui-danger: #b3261e;
  --ui-danger-hover: #8c1d18;
  --ui-on-danger: #ffffff;
  --ui-danger-soft: #fbe3e0;
  --ui-on-danger-soft: #8c1d18;
  --ui-warning: #7a5a00;
  --ui-warning-soft: #fbeec8;
  --ui-on-warning-soft: #5c4300;
  --ui-warning-edge: #ffe08a;
  --ui-ok: #0a0a0b;
  --ui-present: #cbd8c1;
  --ui-on-present: #3f463d;
  /* Rang: umplerile de medalie (numeralul e OBLIGATORIU: față de alb 1.9–2.4) și cerneala lor. */
  --ui-rank-gold: #e3b341;
  --ui-rank-silver: #b8bec5;
  --ui-rank-bronze: #d99a66;
  --ui-rank-gold-ink: #8a6600;
  --ui-rank-silver-ink: #66625a;
  --ui-rank-bronze-ink: #8a5220;
  --ui-on-rank: #0a0a0b;
  /* Stări (D2a + ADR 0057): hover-ul conturatelor / fantomelor pe `--ui-hover`; apăsat = strat de stare (cerneala 18% peste
     umplerea liniștită), nu culoarea acțiunii principale; dezactivat = pereche tonală lizibilă, nu opacitate. */
  --ui-hover: #e3e3df;
  --ui-on-hover: #0a0a0b;
  --ui-pressed: color-mix(in srgb, var(--ui-ink) 18%, var(--ui-quiet));
  --ui-on-pressed: #0a0a0b;
  --ui-pressed-edge: #74747c;
  --ui-disabled: #dadad5;
  --ui-on-disabled: #4a4a52;
  --ui-zebra: color-mix(in srgb, var(--ui-ink) 4%, transparent);
  --ui-switch-on: #8e24e0;
  /* ROLURI:END */

  /* ---- TIPOGRAFIE (o familie; ierarhia din mărime + greutate + lățime + culoare) ---- */
  --sm-font: 'Twemoji Country Flags', 'Archivo', system-ui, sans-serif;
  --sm-fs-title: clamp(1.125rem, 0.97rem + 0.7vw, 1.5rem);     /* 18 → 24 */
  /* fonturi: o singură familie (Space Mono iese de pe pagină) */
  --kf-font-display: var(--sm-font); --kf-font-mono: var(--sm-font);
  --font-sans: var(--sm-font); --font-display: var(--sm-font); --font-mono: var(--sm-font);

  /* ---- ARENA (B234): tipografia de AFIȘ ----
     Lățimea condensată a titlurilor (Archivo variabil, axa `wdth`; fețele condensate sunt declarate în capul `components.css`, foaie
     pe care ecranul juratului n-o încarcă). Mărimile de pe /concursuri și /arhiva curg din containerul în care stau (`cqi`: `.cl`,
     `.cl-contest`, `.cl-cat`), nu din ecran. Tokenii stau AICI, nu în `tokens.css`: acela îl încarcă și juratul (ADR 0023). */
  --ar-wdth: 75%;                                          /* lățimea titlurilor condensate */
  --ar-fs-section: clamp(1.5rem, 1rem + 2.5cqi, 3.25rem);  /* luna (/concursuri) / anul (/arhiva) */
  --ar-fs-contest: clamp(1.6rem, 6.5cqi, 3.25rem);         /* numele concursului, pe copertă */
  --ar-fs-day:     clamp(2.25rem, 8cqi, 4.25rem);          /* ziua, pe copertă */
  --ar-fs-format:  clamp(1.35rem, 8.5cqi, 2.25rem);        /* 2 VS 2, în placa categoriei */
  --ar-fs-tab:     clamp(1.1rem, .9rem + .8cqi, 1.5rem);   /* tab-urile subliniate */
  --ar-rail:       4px;                                    /* dunga laterală a concursului */
  --ar-cover-min:  clamp(8.5rem, 34cqi, 17rem);           /* înălțimea copertei */

  /* ---- FORMĂ ---- */
  /* B234 (Arena): colțurile drepte ale afișului — 2px pe controale / rânduri / câmpuri, 4px pe carduri; pastilele rămân rotunde. */
  --sm-r-row: 2px;              /* rânduri, cipuri, controale, câmpuri */
  --sm-r-card: 4px;             /* carduri */
  --sm-r-pill: 999px;           /* pastile, controale de filtrare, stări */

  /* ---- BANDA DE NAVIGAȚIE (B188, direcția B) ----
     O BANDĂ opacă, cu suprafața ei. Pe tema deschisă = banda de CERNEALĂ (ESPN, GitHub, Smoothcomp; Carbon „Gray 100 shell") —
     valorile sunt tonurile temei ÎNCHISE (aceleași perechi de contrast, deja măsurate). Tot ce stă pe bandă citește rolurile ei
     (`components.css`, blocul „VALORI DE SITE"). Umbra e MICĂ și permanentă (cea mare e a straturilor care plutesc).
     B234 (Arena): banda NEAGRĂ pe AMBELE teme (`--ui-edge-band`), cu un fir de lumină dedesubt în loc de umbră; textul și
     controalele în tonurile scenei Arena (aceleași valori și pe închis — blocul de acolo le repetă, garda NavBandColorsTest). */
  --nav-bg: var(--ui-edge-band); --nav-fg: #a9a9b2; --nav-fg-on: #f4f4f2; --nav-ind: #cf8dff;
  --nav-hover: #1c1c1f; --nav-ctl-line: #74747e; --nav-shadow: inset 0 -1px 0 rgb(255 255 255 / .08);

  /* ---- REGISTRUL TIPOGRAFIC ȘI DE FORMĂ (rolurile din tokens.css) ----
     Skinul spune O DATĂ ce face cu fiecare rol (B159 L0.8d): titlul paginii și titlurile de conținut (B234: afiș — 900, majuscule),
     numele / cifrele la 800, starea la 700, tab-urile fără majuscule, colțurile de rând / card. */
  --radius-sm: var(--sm-r-row); --radius-md: var(--sm-r-row); --radius-lg: var(--sm-r-card);
  --kf-r-sm: var(--sm-r-row);
  /* B234 (Arena): titlul paginii și titlurile de conținut = tipografia de AFIȘ — 900, majuscule, tracking strâns. Lățimea condensată
     (`--ar-wdth`) NU e rol: o poartă doar titlurile din machetă (rolul `title` îl citesc și adminul / bracketul / modalele). */
  --type-display-weight: 900; --type-display-case: uppercase; --type-display-tracking: -.005em;
  --type-title-weight: 900; --type-title-case: uppercase; --type-title-tracking: -.005em;
  --type-name-weight: 800;
  --type-tab-case: uppercase; --type-tab-tracking: -.005em;   /* B234 (Arena): tab-urile = titluri condensate */
  --type-number-weight: 800;
  --type-status-weight: 700;
  --radius-row: var(--sm-r-row); --radius-card: var(--sm-r-card);
  /* L2: pastilele (stil / format / top N / discriminator / nivel) și insignele de stare. */
  --radius-chip: var(--sm-r-pill); --radius-status: var(--sm-r-pill);
  --shadow-hover-strip: none;
  /* CONTROALE (B159 L1.1, D2a): butoanele fără majuscule / tracking, 700. FORMA (B172, ownerul: „începe să mă omoare toate
     butoanele astea rotunde peste tot"): controlul NU mai e pastilă — rotund = o stare sau o identitate pe care o CITEȘTI
     (`--radius-chip`, `--radius-status`, medaliile, punctele); colț de rând = un control pe care îl APEȘI. Tokenul hrănește,
     prin `tokens.css` (`--bs-btn-border-radius`), toate butoanele Bootstrap + `.btn-ink`, `.btn-xs`, `.btn-login`, `.filter-pill`,
     paginarea. Aceeași rază ca a câmpului (B234: 2px): butonul se potrivește cu inputul de lângă el. ⚠️ Deviem de la Material 3 (butoane pastilă),
     asumat: dovada „rotund = mai multe clickuri" a picat la replicare (DESIGN_RESEARCH §3.4); coerent cu Carbon. */
  --type-control-weight: 700; --type-control-case: none; --type-control-tracking: 0;
  --radius-control: var(--sm-r-row);
  /* ETICHETE (B159 L1.6, A6): 600, majusculele rămân (etichete de 1–2 cuvinte, D4a), tracking .06em. */
  --type-label-weight: 600; --type-label-tracking: .06em;
  /* CÂMPURI (B159 L1.3): colțul de rând. */
  --radius-field: var(--sm-r-row);
  --sm-close-filter: none;      /* X-ul Bootstrap e desenat negru: pe tema deschisă rămâne cum e */

  /* ---- PUNTEA (ADR 0063 → B231) ----
     Numele vechi, ca PORECLE ale rolurilor, DOAR pentru cititorii din afara componentelor de site: `base-layout.css` (comun cu
     ecranul juratului, care are alt skin — B231 îl mută pe roluri) și puntea Bootstrap din `tokens.css`. Componentele site-ului
     NU le citesc (garda B230). Un nume rămas fără cititor se șterge — nu i se adaugă cititori noi. */
  --sm-s1: var(--ui-flat); --sm-s3: var(--ui-quiet); --sm-hair: var(--ui-hair); --sm-line: var(--ui-line);
  --sm-text-hi: var(--ui-ink); --sm-text-mid: var(--ui-ink-muted); --sm-danger: var(--ui-danger); --sm-on-danger: var(--ui-on-danger);
  --sm-danger-hover: var(--ui-danger-hover); --sm-switch-on: var(--ui-switch-on); --sm-quiet-fill: var(--ui-quiet);
  --sm-elev-float: var(--ui-shadow-float);
  --sm-btn-fill: var(--ui-accent-fill); --sm-on-btn-fill: var(--ui-on-accent-fill); --sm-btn-fill-hover: var(--ui-accent-fill-hover);
  --sm-btn-press: var(--ui-pressed); --sm-on-btn-press: var(--ui-on-pressed); --sm-btn-press-edge: var(--ui-pressed-edge);
  --sm-btn-hover: var(--ui-hover); --sm-on-btn-hover: var(--ui-on-hover);
  --page-bg: var(--ui-page); --bg: var(--ui-page); --kf-bg: var(--ui-page);
  --paper: var(--ui-flat); --surface: var(--ui-flat); --bg-elevated: var(--ui-flat); --kf-surface: var(--ui-flat); --kf-surface-bright: var(--ui-flat);
  --paper-2: var(--ui-subtle); --surface-2: var(--ui-subtle); --kf-surface-2: var(--ui-subtle); --kf-tint: var(--ui-subtle);
  --surface-inverse: var(--ui-quiet); --volt: var(--ui-quiet); --kf-accent-strip: var(--ui-quiet);
  --surface-inverse-rgb: var(--ui-quiet-rgb); --surface-2-rgb: var(--ui-subtle-rgb); --text-rgb: var(--ui-ink-rgb);
  --text: var(--ui-ink); --fg1: var(--ui-ink); --kf-text: var(--ui-ink); --text-on-inverse: var(--ui-ink); --volt-ink: var(--ui-ink);
  --accent: var(--ui-ink); --kf-accent: var(--ui-ink); --kf-on-tint: var(--ui-ink);
  --fg2: var(--ui-ink-muted); --fg3: var(--ui-ink-muted); --kf-text-variant: var(--ui-ink-muted);
  --text-secondary: var(--ui-ink-muted); --text-muted: var(--ui-ink-muted); --text-faint: var(--ui-ink-muted);
  --kf-line: var(--ui-hair); --border-hair: var(--ui-hair);
  --border-strong: var(--ui-line); --kf-outline: var(--ui-line);
  --primary: var(--ui-inverse); --kf-primary-solid: var(--ui-inverse); --kf-on-solid: var(--ui-on-inverse);
  --focus-ring: var(--ui-focus); --title-accent: var(--ui-accent);
  --success: var(--ui-win-ink); --kf-success: var(--ui-win-ink); --success-soft: var(--ui-qualified-tint); --kf-success-soft: var(--ui-qualified-tint);
  --danger: var(--ui-danger); --kf-danger: var(--ui-danger); --danger-soft: var(--ui-danger-soft); --kf-danger-soft: var(--ui-danger-soft);
  --warning: var(--ui-warning); --kf-warning: var(--ui-warning); --warning-soft: var(--ui-warning-soft); --kf-warning-soft: var(--ui-warning-soft);
  --kf-on-warning-soft: var(--ui-on-warning-soft);
  --live: var(--ui-live); --live-ink: var(--ui-on-live); --status-active-bg: var(--ui-live); --status-active-fg: var(--ui-on-live);
  --status-done-bg: var(--ui-quiet); --status-done-fg: var(--ui-ink-muted);
  --btn-disabled-bg: var(--ui-disabled); --btn-disabled-fg: var(--ui-on-disabled);
}

/* ---- TEMA ÎNCHISĂ ----
   Fără fallback `@media (prefers-color-scheme: dark)`: theme_boot() pune data-theme pe <html> sincron, în <head>, înainte de
   primul paint. Fără JS pagina rămâne pe light — tema lizibilă. Porecla din puntea de mai sus se re-rezolvă singură aici:
   `[data-theme]` stă pe același `<html>` ca `:root`. */
[data-theme="dark"] {
  --sm-close-filter: invert(1) grayscale(100%) brightness(200%);  /* ...și se inversează pe tema închisă */
  /* Cipurile de ajustare folosesc umplerile de LIGHT și pe dark: pe dark amber / portocaliul cu text alb dădeau 2.94 / 3.56:1.
     Pagina juratului (judge.css) își păstrează tokenii ei. */
  --adj-penalty-1: var(--c-adj-p1-light); --adj-penalty-2: var(--c-adj-p2-light); --adj-penalty-3: var(--c-adj-p3-light);
  --adj-bonus-1: var(--c-adj-b1-light); --adj-bonus-2: var(--c-adj-b2-light); --adj-bonus-3: var(--c-adj-b3-light);
  /* Bara (B234, Arena): aceeași bandă neagră ca pe deschis — pe închis `--ui-edge-band` e negrul pur, sub pagina `#0a0a0b`; firul de
     lumină de dedesubt o desparte. Hover-ul în HEX (un `color-mix()` iese nemăsurabil în contrast-audit). */
  --nav-bg: var(--ui-edge-band); --nav-fg: #a9a9b2; --nav-fg-on: #f4f4f2; --nav-ind: #cf8dff;
  --nav-hover: #1c1c1f; --nav-ctl-line: #74747e; --nav-shadow: inset 0 -1px 0 rgb(255 255 255 / .08);
  /* ROLURI-INCHIS:START — skinul pe tema închisă (ADR 0063); un rol care lipsește aici are aceeași valoare ca pe deschis. */
  /* ⚠️ B234: skinul ARENA, ca pe deschis — cifrele din notele de mai jos sunt ale skinului anterior (sursa: contrast-audit.php). */
  /* B227 (alegerea ownerului): pagina aproape neagră `#060706` — s1 pe ea 1.18 (pe `#101310` era 1.10); negrul pur (1.23, ca
     iOS) lasă pată pe OLED la derulare. Pe închis cardul URCĂ pe s2 (`--ui-raised`), iar benzile lui coboară la s1. */
  --ui-page: #0a0a0b;
  --ui-raised: #1f1f23;
  --ui-flat: #141416;
  --ui-sunken: #0f0f11;
  --ui-subtle: #18181b;
  --ui-subtle-rgb: 24, 24, 27;
  /* B228: `--ui-quiet` urcă o treaptă — 1.26 peste cardul s2 (stătea la 1.18). */
  --ui-quiet: #2c2c31;
  --ui-quiet-rgb: 44, 44, 49;
  --ui-edge-band: #000000;
  --ui-lifted: #2c2c31;
  --ui-shadow-raised: inset 0 1px 0 rgb(255 255 255 / .06), 0 0 0 1px #232327;
  --ui-shadow-float: 0 12px 32px rgb(0 0 0 / .6);
  /* Cerneala off-white, nu #fff (vibrează pe închis): 16.46 pe pagină · 13.91 pe s1. */
  --ui-ink: #f4f4f2;
  --ui-ink-rgb: 244, 244, 242;
  --ui-ink-muted: #a9a9b2;
  --ui-inverse: #f4f4f2;
  --ui-on-inverse: #0a0a0b;
  /* `--ui-hair` rămâne `#313831`: linie decorativă, nu suprafață. */
  --ui-line: #7a7a84;
  --ui-hair: #26262b;
  --ui-edge: #3d3d44;
  --ui-float-edge: #74747e;
  --ui-focus: #cf8dff;
  /* Textul de identitate pe închis (hue 275°, spre fulger): 7.23 pe s1 · 8.56 pe pagină. Umplerea rămâne aceeași, cu text alb. */
  --ui-accent: #cf8dff;
  --ui-accent-tint: #2a1840;
  --ui-win-ink: #c8ff00;
  --ui-win-mark: #c8ff00;
  --ui-qualified-tint: #19220f;
  --ui-win-tint: rgb(200 255 0 / .16);
  --ui-lose: #34343a;
  --ui-on-lose: #b4b4bc;
  --ui-live-tint: #3e1d1a;
  --ui-live-mark: #ff6b5e;
  --ui-on-live-mark: #0a0a0b;
  --ui-danger: #ff9d8f;
  --ui-danger-hover: #ffb4ab;
  --ui-on-danger: #0a0a0b;
  --ui-danger-soft: #3a1a17;
  --ui-on-danger-soft: #ffb4ab;
  --ui-warning: #e8c466;
  --ui-warning-soft: #312509;
  --ui-on-warning-soft: #ffe08a;
  --ui-ok: #f4f4f2;
  --ui-present: #35503a;
  --ui-on-present: #cfd6cc;
  --ui-rank-gold-ink: #d9a600;
  --ui-rank-silver-ink: #a8a294;
  --ui-rank-bronze-ink: #d08a4a;
  --ui-hover: #27272c;
  --ui-on-hover: #f4f4f2;
  --ui-on-pressed: #f4f4f2;
  --ui-pressed-edge: #74747e;
  --ui-disabled: #2c2c31;
  --ui-on-disabled: #a9a9b2;
  /* ROLURI-INCHIS:END */
}

/* ── 2. COMPONENTE ──────────────────────────────────────────────────────────────────────── */