/* ═══════════════════════════════════════════════════════════════════════════
   NECObot — jetons de conception (noir et blanc)
   Servi sous /theme/tokens.css. À charger après /theme/fonts/fonts.css et avant
   base.css, components.css ou overlay.css.

   Direction artistique (réponse q02 de NecoTho : « noir et blanc », chaîne Twitch necotho) :
   quasi-noir et blanc cassé, gris neutres, UNE seule couleur d'état : un rouge discret réservé
   aux erreurs et aux actions dangereuses. Succès, avertissement et info restent neutres et se
   distinguent par une icône et un texte (jamais par la couleur seule).
   Seule exception, la console de modération (demande de l'administrateur du 06/10/2026 : « une
   couleur par degré de marque (jaune, orange, rouge) et un surlignage vert ») : quatre couleurs
   fonctionnelles --color-mod-*, réservées aux marquages d'une personne et au surlignage d'un
   message, chacune avec son fond teinté (-soft) ; jamais ailleurs, et jamais seules (motif du
   liseré, cadre du surlignage, libellé).

   Thèmes :
   · sombre par défaut ; clair si le système le demande (prefers-color-scheme: light) ;
   · choix explicite sur n'importe quel élément : data-theme="dark" ou data-theme="light"
     (sur <html> pour toute la page, ou sur un bloc : les jetons dérivés sont recalculés).
   · Overlays OBS : jeu --overlay-* indépendant du thème du système (carte sombre par défaut,
     variante claire avec data-overlay="clair").

   Chaque couleur sémantique a sa variante -rgb (triplet « R V B ») pour les transparences :
     background: rgb(var(--color-text-rgb) / .06);
   Les valeurs hexadécimales sont celles de brand.json ; outils/verifier-marque.js contrôle la
   concordance, les triplets et les contrastes (AA : 4,5:1 pour le texte, 3:1 pour les contours).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Jetons communs aux deux thèmes ── */
:root {
  /* Polices (fonts/fonts.css), avec replis système */
  --font-display: 'Space Grotesk', 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  --font-mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', 'DejaVu Sans Mono', monospace;

  /* Graisses */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Échelle des tailles (1rem = 16 px) */
  --fs-xs: 0.75rem;    /* 12 px : mentions, pieds de tableau */
  --fs-sm: 0.875rem;   /* 14 px : libellés, texte dense */
  --fs-md: 1rem;       /* 16 px : texte courant */
  --fs-lg: 1.125rem;   /* 18 px : texte d'accroche */
  --fs-xl: 1.375rem;   /* 22 px : titre de carte */
  --fs-2xl: 1.75rem;   /* 28 px : titre de page */
  --fs-3xl: 2.25rem;   /* 36 px : grand titre */
  --fs-4xl: clamp(2.5rem, 1.9rem + 2.6vw, 3.5rem); /* 40 à 56 px : vitrine */

  /* Interlignes et approches */
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.55;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.09em;   /* petites capitales espacées (libellés, badges) */

  /* Espacements (pas de 4 px) */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Rayons : nets, un clin d'œil au pixel art */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Traits et focus */
  --border-width: 1px;
  --focus-width: 2px;
  --focus-offset: 2px;
  --pixel: 4px;               /* taille d'un « pixel » des motifs décoratifs */
  --color-avatar-bg: #181818; /* fond de l'avatar de NecoTho (image fixe : même valeur dans les deux thèmes) */

  /* Mouvement (remis à 0 si l'utilisateur réduit les animations, voir plus bas) */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.3, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* Plans (z-index) */
  --z-sticky: 100;
  --z-nav: 200;
  --z-dropdown: 300;
  --z-modal: 1000;
  --z-toast: 1100;

  /* Mise en page du panel */
  --nav-height: 3.5rem;
  --sidebar-width: 15rem;
  --content-max: 75rem;
  --control-height: 2.5rem;   /* boutons et champs : cible tactile de 40 px */
  --control-height-sm: 2rem;

  /* ── Overlays OBS (pensés pour une source navigateur 1920 × 1080 à l'échelle 1) ──
     Tailles en px : 1 px = 1 pixel de l'image du stream. Un spectateur regarde souvent
     en 720p ou sur téléphone : rien en dessous de --overlay-fs-min. */
  --overlay-font-display: var(--font-display);
  --overlay-font-body: var(--font-body);
  --overlay-card-rgb: 12 12 12;
  --overlay-card-alpha: 0.86;
  --overlay-text: #f3f2ee;
  --overlay-text-rgb: 243 242 238;
  --overlay-text-muted: #c9c9c9;
  --overlay-text-muted-rgb: 201 201 201;
  --overlay-fill: #f3f2ee;
  --overlay-fill-rgb: 243 242 238;
  --overlay-on-fill: #0c0c0c;
  --overlay-danger: #f2766e;
  --overlay-danger-rgb: 242 118 110;
  /* Texte posé sur la vidéo (sans carte) : clair à contour noir, comme des sous-titres,
     quelle que soit la variante de carte */
  --overlay-video-text: #f3f2ee;
  --overlay-video-text-rgb: 243 242 238;
  --overlay-video-halo-rgb: 0 0 0;
  /* Paliers de NECOThink (0-3, 4-7, 8-10, 11-13, 14-16, 17-20), du plus faible au plus fort */
  --overlay-tier-1: #7a7a7a;
  --overlay-tier-2: #959595;
  --overlay-tier-3: #afafaf;
  --overlay-tier-4: #c8c8c8;
  --overlay-tier-5: #dfdfdf;
  --overlay-tier-6: #f3f2ee;
  --overlay-fs-min: 22px;       /* plus petit texte autorisé à l'écran */
  --overlay-fs-label: 22px;     /* libellés en capitales (SONDAGE, NECOTHINK) */
  --overlay-fs-body: 28px;      /* options, avis, détails */
  --overlay-fs-title: 36px;     /* question, sujet du vote */
  --overlay-fs-number: 56px;    /* compte à rebours, pourcentages mis en avant */
  --overlay-fs-hero: 120px;     /* note finale */
  --overlay-radius: 18px;
  --overlay-pad: 28px;
  --overlay-gap: 16px;
  --overlay-bar-height: 32px;
  --overlay-bar-radius: 6px;
  --overlay-stroke-width: 4px;  /* contour du texte dessiné (canvas, SVG) : couleur --overlay-stroke */
  --overlay-safe: 48px;         /* marge minimale au bord de l'image */
  --overlay-width: 640px;       /* largeur conseillée d'une carte (sondage, vote) */
}

/* ── 2. Thème sombre (par défaut) ── */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0f0f0f;            --color-bg-rgb: 15 15 15;
  --color-bg-inset: #0a0a0a;      --color-bg-inset-rgb: 10 10 10;
  --color-surface: #181818;       --color-surface-rgb: 24 24 24;       /* = fond de l'avatar */
  --color-surface-2: #202020;     --color-surface-2-rgb: 32 32 32;
  --color-surface-3: #262626;     --color-surface-3-rgb: 38 38 38;
  --color-border: #2e2e2e;        --color-border-rgb: 46 46 46;        /* séparateurs (décoratif) */
  --color-border-strong: #727272; --color-border-strong-rgb: 114 114 114; /* contour des champs (≥ 3:1) */
  --color-text: #f3f2ee;          --color-text-rgb: 243 242 238;
  --color-text-muted: #ababab;    --color-text-muted-rgb: 171 171 171;
  --color-text-subtle: #949494;   --color-text-subtle-rgb: 148 148 148;
  --color-brand: #f3f2ee;         --color-brand-rgb: 243 242 238;
  --color-on-brand: #0f0f0f;      --color-on-brand-rgb: 15 15 15;
  --color-success: #f3f2ee;       --color-success-rgb: 243 242 238;
  --color-warning: #f3f2ee;       --color-warning-rgb: 243 242 238;
  --color-info: #ababab;          --color-info-rgb: 171 171 171;
  --color-danger: #f2766e;        --color-danger-rgb: 242 118 110;
  --color-on-danger: #0f0f0f;     --color-on-danger-rgb: 15 15 15;
  --color-focus: #f3f2ee;         --color-focus-rgb: 243 242 238;
  /* Console de modération (demande de l'administrateur du 06/10/2026) : marquages jaune (Attention), orange (À
     surveiller), rouge (Suspect) et surlignage vert (ampoule) ; trait = liseré, pastille, icône ; -soft = fond teinté */
  --color-mod-yellow: #e9bd3c;      --color-mod-yellow-rgb: 233 189 60;
  --color-mod-yellow-soft: #322b12; --color-mod-yellow-soft-rgb: 50 43 18;
  --color-mod-orange: #f0883e;      --color-mod-orange-rgb: 240 136 62;
  --color-mod-orange-soft: #3c2511; --color-mod-orange-soft-rgb: 60 37 17;
  --color-mod-red: #f0524a;         --color-mod-red-rgb: 240 82 74;
  --color-mod-red-soft: #431d1c;    --color-mod-red-soft-rgb: 67 29 28;
  --color-mod-green: #4fc160;       --color-mod-green-rgb: 79 193 96;
  --color-mod-green-soft: #16311d;  --color-mod-green-soft-rgb: 22 49 29;
  --color-backdrop: rgb(0 0 0 / 0.66);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-md: 0 6px 18px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 18px 50px rgb(0 0 0 / 0.6);
}

/* ── 3. Thème clair : demandé par le système (sauf choix explicite du sombre) ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --color-bg: #f4f3ef;            --color-bg-rgb: 244 243 239;
    --color-bg-inset: #ebe9e4;      --color-bg-inset-rgb: 235 233 228;
    --color-surface: #fcfbf9;       --color-surface-rgb: 252 251 249;
    --color-surface-2: #efeee9;     --color-surface-2-rgb: 239 238 233;
    --color-surface-3: #ffffff;     --color-surface-3-rgb: 255 255 255;
    --color-border: #dcdad4;        --color-border-rgb: 220 218 212;
    --color-border-strong: #858585; --color-border-strong-rgb: 133 133 133;
    --color-text: #141414;          --color-text-rgb: 20 20 20;
    --color-text-muted: #525252;    --color-text-muted-rgb: 82 82 82;
    --color-text-subtle: #686868;   --color-text-subtle-rgb: 104 104 104;
    --color-brand: #141414;         --color-brand-rgb: 20 20 20;
    --color-on-brand: #f4f3ef;      --color-on-brand-rgb: 244 243 239;
    --color-success: #141414;       --color-success-rgb: 20 20 20;
    --color-warning: #141414;       --color-warning-rgb: 20 20 20;
    --color-info: #525252;          --color-info-rgb: 82 82 82;
    --color-danger: #b3322b;        --color-danger-rgb: 179 50 43;
    --color-on-danger: #ffffff;     --color-on-danger-rgb: 255 255 255;
    --color-focus: #141414;         --color-focus-rgb: 20 20 20;
    /* Console de modération (demande de l'administrateur du 06/10/2026) : traits plus sombres (≥ 3:1 sur fond clair),
       fonds teintés pâles */
    --color-mod-yellow: #9c7400;      --color-mod-yellow-rgb: 156 116 0;
    --color-mod-yellow-soft: #fcf1c4; --color-mod-yellow-soft-rgb: 252 241 196;
    --color-mod-orange: #c05a00;      --color-mod-orange-rgb: 192 90 0;
    --color-mod-orange-soft: #feeadb; --color-mod-orange-soft-rgb: 254 234 219;
    --color-mod-red: #c62828;         --color-mod-red-rgb: 198 40 40;
    --color-mod-red-soft: #fee8e6;    --color-mod-red-soft-rgb: 254 232 230;
    --color-mod-green: #1f7a34;       --color-mod-green-rgb: 31 122 52;
    --color-mod-green-soft: #def3e2;  --color-mod-green-soft-rgb: 222 243 226;
    --color-backdrop: rgb(20 20 20 / 0.42);
    --shadow-sm: 0 1px 2px rgb(20 20 20 / 0.08);
    --shadow-md: 0 6px 18px rgb(20 20 20 / 0.10);
    --shadow-lg: 0 18px 50px rgb(20 20 20 / 0.18);
  }
}

/* ── 4. Thème clair : choix explicite (mêmes valeurs que le bloc 3) ── */
[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f4f3ef;            --color-bg-rgb: 244 243 239;
  --color-bg-inset: #ebe9e4;      --color-bg-inset-rgb: 235 233 228;
  --color-surface: #fcfbf9;       --color-surface-rgb: 252 251 249;
  --color-surface-2: #efeee9;     --color-surface-2-rgb: 239 238 233;
  --color-surface-3: #ffffff;     --color-surface-3-rgb: 255 255 255;
  --color-border: #dcdad4;        --color-border-rgb: 220 218 212;
  --color-border-strong: #858585; --color-border-strong-rgb: 133 133 133;
  --color-text: #141414;          --color-text-rgb: 20 20 20;
  --color-text-muted: #525252;    --color-text-muted-rgb: 82 82 82;
  --color-text-subtle: #686868;   --color-text-subtle-rgb: 104 104 104;
  --color-brand: #141414;         --color-brand-rgb: 20 20 20;
  --color-on-brand: #f4f3ef;      --color-on-brand-rgb: 244 243 239;
  --color-success: #141414;       --color-success-rgb: 20 20 20;
  --color-warning: #141414;       --color-warning-rgb: 20 20 20;
  --color-info: #525252;          --color-info-rgb: 82 82 82;
  --color-danger: #b3322b;        --color-danger-rgb: 179 50 43;
  --color-on-danger: #ffffff;     --color-on-danger-rgb: 255 255 255;
  --color-focus: #141414;         --color-focus-rgb: 20 20 20;
  /* Console de modération (demande de l'administrateur du 06/10/2026) : mêmes valeurs que le bloc 3 */
  --color-mod-yellow: #9c7400;      --color-mod-yellow-rgb: 156 116 0;
  --color-mod-yellow-soft: #fcf1c4; --color-mod-yellow-soft-rgb: 252 241 196;
  --color-mod-orange: #c05a00;      --color-mod-orange-rgb: 192 90 0;
  --color-mod-orange-soft: #feeadb; --color-mod-orange-soft-rgb: 254 234 219;
  --color-mod-red: #c62828;         --color-mod-red-rgb: 198 40 40;
  --color-mod-red-soft: #fee8e6;    --color-mod-red-soft-rgb: 254 232 230;
  --color-mod-green: #1f7a34;       --color-mod-green-rgb: 31 122 52;
  --color-mod-green-soft: #def3e2;  --color-mod-green-soft-rgb: 222 243 226;
  --color-backdrop: rgb(20 20 20 / 0.42);
  --shadow-sm: 0 1px 2px rgb(20 20 20 / 0.08);
  --shadow-md: 0 6px 18px rgb(20 20 20 / 0.10);
  --shadow-lg: 0 18px 50px rgb(20 20 20 / 0.18);
}

/* ── 5. Jetons dérivés : redéclarés dans chaque portée de thème, sinon un bloc
   data-theme imbriqué hériterait des valeurs déjà calculées pour la racine ── */
:root,
[data-theme] {
  --color-accent: var(--color-brand);           /* pas de couleur d'accent : la marque est noir et blanc */
  --color-accent-rgb: var(--color-brand-rgb);
  --color-hover: rgb(var(--color-text-rgb) / 0.06);
  --color-active: rgb(var(--color-text-rgb) / 0.1);
  --color-selected: rgb(var(--color-text-rgb) / 0.08);
  --color-danger-soft: rgb(var(--color-danger-rgb) / 0.12);
  --color-danger-line: rgb(var(--color-danger-rgb) / 0.6);
  --color-selection-bg: var(--color-text);      /* sélection inversée */
  --color-selection-text: var(--color-bg);
  --focus-ring: 0 0 0 var(--focus-offset) var(--color-bg), 0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--color-focus);
  /* Damier « pixel » très discret pour les fonds décoratifs (écran de connexion, vitrine) */
  --texture-pixel: repeating-conic-gradient(rgb(var(--color-text-rgb) / 0.05) 0 25%, transparent 0 50%) 0 0 / calc(var(--pixel) * 2) calc(var(--pixel) * 2);
}

/* ── 6. Overlays OBS : variante claire et jetons dérivés ── */
[data-overlay="clair"] {
  --overlay-card-rgb: 243 242 238;
  --overlay-card-alpha: 0.94;
  --overlay-text: #141414;
  --overlay-text-rgb: 20 20 20;
  --overlay-text-muted: #474747;
  --overlay-text-muted-rgb: 71 71 71;
  --overlay-fill: #141414;
  --overlay-fill-rgb: 20 20 20;
  --overlay-on-fill: #f3f2ee;
  --overlay-danger: #b3322b;
  --overlay-danger-rgb: 179 50 43;
  --overlay-tier-1: #7a7a7a;
  --overlay-tier-2: #666666;
  --overlay-tier-3: #525252;
  --overlay-tier-4: #3e3e3e;
  --overlay-tier-5: #2a2a2a;
  --overlay-tier-6: #141414;
}
:root,
[data-overlay] {
  --overlay-card: rgb(var(--overlay-card-rgb) / var(--overlay-card-alpha));
  --overlay-border: rgb(var(--overlay-text-rgb) / 0.2);
  --overlay-track: rgb(var(--overlay-text-rgb) / 0.14);
  --overlay-shadow: 0 18px 48px rgb(0 0 0 / 0.45), 0 2px 6px rgb(0 0 0 / 0.35);
  /* Texte posé directement sur la vidéo : halo serré qui fait contour (toutes versions d'OBS) */
  --overlay-text-shadow: 0 0 2px rgb(var(--overlay-video-halo-rgb) / 0.95), 0 0 4px rgb(var(--overlay-video-halo-rgb) / 0.85), 0 2px 12px rgb(var(--overlay-video-halo-rgb) / 0.7);
  --overlay-stroke: rgb(var(--overlay-video-halo-rgb) / 0.88);
}

/* ── 7. Animations réduites : durées à zéro (base.css coupe aussi les animations) ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}