/* =========================================================================
   Jetons du socle visuel : couleurs, polices, formes, en sombre par défaut et
   en clair via data-site-theme="light" sur <html>. Importé en tête de
   design-foundation.css. Le dossier public/design/ est aussi monté dans le
   conteneur WordPress, dont le thème de la vitrine (wordpress/themes/celette)
   charge ces jetons sous les pages du CMS : ce fichier ne déclare que des
   propriétés personnalisées, aucune règle qui habillerait leur contenu.
   tests/designFoundation.test.js y veille.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* Surfaces : gris neutres, aucune dominante bleue */
  --bg: #141415;
  --panel: #1d1d1f;
  --panel-rgb: 29, 29, 31;
  --panel-2: #262628;
  /* Fond d'un champ saisissable. Sur fond sombre il s'éclaircit, sur fond
     clair il reste blanc : un aplat gris clair est ce que le navigateur donne
     à un contrôle désactivé, un champ actif qui le porte se lit comme mort.
     Le gris est réservé à :disabled, plus bas. */
  --field-bg: #262628;
  --surface-faint: rgba(255, 255, 255, 0.03);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.11);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #ececed;
  --muted: #a3a3a8;
  --on-accent: #ffffff;

  /* Marque : rouge Celette webtools #ce171f.
     --accent : textes, bordures, icônes (éclairci sur fond sombre pour rester lisible, 4.9:1).
     --accent-solid : aplats (boutons principaux), texte blanc dessus (5.9:1). */
  --accent: #e4585e;
  --accent-rgb: 228, 88, 94;
  --accent-soft-rgb: 240, 170, 172;
  --accent-solid: #ce171f;
  --accent-solid-hover: #b3121a;
  --accent-2: var(--accent);
  --accent-1: var(--accent);
  --accent-1-dark: var(--accent-solid-hover);

  /* Sémantique : statuts et messages uniquement, jamais comme couleur de marque */
  --success: #3fae6a;
  --success-rgb: 63, 174, 106;
  --warning: #e0a030;
  --warning-rgb: 224, 160, 48;
  --danger: #e5484d;
  --danger-rgb: 229, 72, 77;
  --danger-soft: #f3a6a9;
  --info: #9a9aa2;
  --info-rgb: 154, 154, 162;
  --info-soft-rgb: 200, 200, 206;

  --bg-glow: #2a0b0c;            /* halo discret du fond sombre, teinté marque */
  --scrim-rgb: 18, 10, 10;       /* voile posé sur les médias */

  /* Typographie : Rajdhani (titres, navigation, boutons) + Maven Pro (lecture, formulaires ; police du
     site WordPress Celette, donc le contenu CMS et le reste du site partagent la même police) */
  --font-body: "Maven Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Rajdhani", var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Formes */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), 0.35);
  --control-h: 40px;
  --control-h-sm: 32px;
  --control-h-lg: 48px;
}

/* --- Thème clair (préférence utilisateur, data-site-theme="light" sur <html>) --- */
html[data-site-theme="light"] {
  color-scheme: light;
  accent-color: var(--accent);
  --bg: #f6f6f7;
  --panel: #ffffff;
  --panel-rgb: 255, 255, 255;
  --panel-2: #f0f0f2;
  --field-bg: #ffffff;
  --surface-faint: rgba(20, 20, 22, 0.03);
  --surface-hover: rgba(20, 20, 22, 0.05);
  --border: rgba(20, 20, 22, 0.11);
  --border-strong: rgba(20, 20, 22, 0.2);
  --text: #1c1c1e;
  --muted: #6a6a72;
  --accent: #ce171f;
  --accent-rgb: 206, 23, 31;
  --accent-soft-rgb: 227, 120, 125;
  --accent-2: #9f1d22;
  --success: #1f8a4c;
  --success-rgb: 31, 138, 76;
  --warning: #b26a00;
  --warning-rgb: 178, 106, 0;
  --danger: #c8232a;
  --danger-rgb: 200, 35, 42;
  --danger-soft: #9f1d22;
  --info: #6a6a72;
  --info-rgb: 106, 106, 114;
  --info-soft-rgb: 74, 74, 82;
  --bg-glow: transparent;
  --scrim-rgb: 255, 255, 255;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --chrome-fg: #b3121a;
  --chrome-fg-muted: #8f0e15;
  --chrome-border: rgba(206, 23, 31, 0.22);
}