/* ============================================================
   WatchOut — Design tokens (source : variables Figma)
   ============================================================ */
:root {
  /* Fond */
  --dark-background: #04070c;

  /* Marque */
  --brand-primary: #38bdf8;
  --brand-primary-light: #7dd3fc;
  --brand-primary-dark: #0369a1;
  /* Tous les violets de l'app = violet twitch (source de vérité unique : --twitch) */
  --brand-accent: var(--twitch);

  /* Surfaces */
  --background-card: #334155;
  --background-primary: #0f172a;   /* fond des vignettes sans image */
  --background-surface: #1e293b;

  /* Recolorage forcé du logo sur la vignette sans image */
  --sky: #38bdf8;

  /* Texte */
  --text-primary: #f8fafc;
  --text-muted: #64748b;
  --text-error: #B3261E;   /* messages d'erreur des formulaires (login / signup) */

  /* Plateformes */
  --twitch: #8956fb;

  /* Dégradés de boutons (Figma 87:382) — fonds des boutons refondus */
  --grad-btn-primary: linear-gradient(105deg, var(--brand-primary-dark) 0%, var(--background-card) 100%);   /* Details, Team's page, Bracket, Confirm, ADD TO FAV, tag ligue */
  --grad-btn-neutral: linear-gradient(105deg, var(--background-primary) 0%, var(--background-surface) 100%); /* Log in, Google, Discord */

  /* Dégradés des chips du carrousel de filtre (Figma 220:3749) */
  --grad-chip-all: linear-gradient(105deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);   /* chip ALL actif */
  --grad-chip: linear-gradient(109deg, var(--brand-primary-light) 0%, var(--brand-primary) 100%);      /* chip jeu/roster/tier actif */

  /* Remplissage TEMPORAIRE des cards en attendant les vignettes générées */
  --card-placeholder: #1e293b;

  /* Typo */
  --font-display: "Hammersmith One", sans-serif;   /* titres, nom de compé */
  --font-ui: "League Gothic", sans-serif;          /* infos, boutons, dates */
  --font-input: "Inter", sans-serif;               /* champ de recherche */

  /* Hauteur commune des contrôles (Watch / Details / cloche) — ils doivent TOUS
     faire la même hauteur, comme sur la maquette (10px + cap-height 11px + 10px). */
  --control-h: 31px;

  /* Dimensions des cards — NE PAS MODIFIER (verrouillées sur la maquette) */
  --card-big-w: 240px;
  --card-big-h: 328px;
  --card-lil-w: 145px;
  --card-lil-h: 198px;

  /* Largeur de référence de la maquette (iPhone 17) */
  --frame-w: 402px;
}