/* ============================================================================
   RSKTV Player Pro — Tokens design (variables centralisées)
   Tranche 0 de la refonte UI. Purement additif : tant que rien ne les référence
   et que le flag UI_V2 est OFF, AUCUN changement visuel.
   Référentiel TV : 1920×1080. Lecture à 3 m (10-foot UI).
   ============================================================================ */
:root {
  /* ── Accent (rouge marque) ─────────────────────────────────────────────── */
  --rsk-accent:      #e50914;
  --rsk-accent-dim:  rgba(var(--rsk-accent-rgb), 0.22);
  --rsk-accent-soft: rgba(var(--rsk-accent-rgb), 0.12);


  /* ── Canaux de l'accent ────────────────────────────────────────────────
     Seule facon d'obtenir un accent transparent THEMABLE sous Chromium M56,
     qui ne connait ni `color-mix()` ni `rgb(var(--x) / 50%)` :
         rgba(var(--rsk-accent-rgb), 0.25)
     `var()` est substitue avant l'analyse de la propriete. Un theme redefinit
     ce seul jeton et les 350 usages transparents suivent. */
  --rsk-accent-rgb:  229, 9, 20;
  /* Canaux du FOND : pour les voiles semi-transparents, qui doivent
     s'eclaircir avec le theme au lieu de rester des taches sombres. */
  --rsk-bg-rgb:      7, 7, 15;
  --rsk-accent-deep: #b81d24;
  --rsk-accent-warm: #ff1f2e;
  --rsk-accent-glow: rgba(var(--rsk-accent-rgb), 0.40);

  /* ── Jetons complementaires (parite Android, decision D2) ──────────────
     Valeurs par defaut = celles deja en place dans les feuilles, pour que
     sans `data-theme` rien ne bouge a l'ecran. */
  --rsk-bg-2:           #0c0c1a;   /* barre laterale / barre d'application */
  --rsk-card:           #0e0e22;
  --rsk-border-2:       rgba(255, 255, 255, 0.14);
  --rsk-border-brand:   rgba(var(--rsk-accent-rgb), 0.40);
  --rsk-amber:          #f5a623;
  --rsk-amber-deep:     #ff8a00;
  --rsk-amber-glow:     rgba(245, 166, 35, 0.40);
  --rsk-cyan:           #4fc3f7;
  --rsk-green:          #3ecf6b;
  --rsk-blue:           #4a9ef5;
  --rsk-focus-bg:       #3d3d3d;

  /* ── Neutres (thème sombre) ────────────────────────────────────────────── */
  --rsk-bg:         #07070f;   /* fond global */
  --rsk-surface:    #0e0e22;   /* cartes / panneaux */
  --rsk-surface-2:  #16162a;   /* éléments surélevés */
  --rsk-border:     #1c1c3c;   /* bordures discrètes */

  /* ── Texte (contrastes lisibles à 3 m) ─────────────────────────────────── */
  --rsk-text:       #f0f0fa;   /* titres / texte principal */
  --rsk-text-dim:   #a0a0cc;   /* secondaire — 8.0:1 sur --rsk-bg */
  /* tertiaire / hints — remonté le 07/06/2026 : #55557a échouait à 2.84:1.
     #9292ba = 6.73:1 sur --rsk-bg (≥ 4.5:1 WCAG AA, lisible à 3 m). */
  --rsk-text-mute:  #9292ba;

  /* ── Échelle typographique (px @1080p — min 22px pour la lisibilité TV) ── */
  --rsk-fs-xl: 40px;
  --rsk-fs-lg: 32px;
  --rsk-fs-md: 26px;
  --rsk-fs-sm: 22px;
  --rsk-fs-xs: 18px;   /* réservé aux badges/labels, jamais au texte courant */

  /* ── Rythme d'espacement ───────────────────────────────────────────────── */
  --rsk-gap-xs:  8px;
  --rsk-gap-sm: 14px;
  --rsk-gap:    24px;
  --rsk-gap-lg: 40px;

  /* ── Rayons ────────────────────────────────────────────────────────────── */
  --rsk-radius:    14px;
  --rsk-radius-sm: 8px;

  /* ── État de focus (généralisé sur TV) ─────────────────────────────────── */
  --rsk-focus-ring:  2px solid var(--rsk-accent);
  --rsk-focus-scale: 1.04;

  /* ── Zone de sécurité TV (overscan) ────────────────────────────────────── */
  --tv-safe:    5%;     /* marge en pourcentage (responsive) */
  --tv-safe-px: 54px;   /* ~5% de 1080p, pour les cas en pixels */
}