/* Fichier de base des variables – aucun style “visuel”, seulement des tokens.
   Par défaut : thème sombre. Le thème clair s’active via [data-theme="light"] ou .theme-light.
   Compatible aussi avec prefers-color-scheme si aucun attribut n’est défini.
*/

:root {
  /* Couleurs de base (dark) */
  --bg:        #0b0e12;
  --fg:        #e6e9ef;
  --muted:     #9aa6b2;
  --card:      #151a21;
  --border:    #222a33;
  --accent:    #5b8cff;

  /* Alias fréquents (pour compat) */
  --bg-color:        var(--bg);
  --fg-color:        var(--fg);
  --text-color:      var(--fg);
  --muted-color:     var(--muted);
  --card-bg:         var(--card);
  --card-color:      var(--card);
  --panel-bg:        var(--card);
  --panel-color:     var(--card);
  --border-color:    var(--border);
  --accent-color:    var(--accent);
  --link-color:      var(--accent);
  --link-hover:      color-mix(in oklab, var(--accent) 85%, white);

  /* Accessoires */
  --shadow-1: 0 10px 24px rgba(0,0,0,.18);

  /* Indication de schéma couleur pour les composants natifs (scrollbars, inputs…) */
  color-scheme: dark light;
}

/* Thème clair explicite via attribut ou classe */
:root[data-theme="light"], .theme-light {
  --bg:        #f7f9fc;
  --fg:        #0d1117;
  --muted:     #5b6573;
  --card:      #ffffff;
  --border:    #e5e9ef;
  --accent:    #2a6df4;

  --bg-color:        var(--bg);
  --fg-color:        var(--fg);
  --text-color:      var(--fg);
  --muted-color:     var(--muted);
  --card-bg:         var(--card);
  --card-color:      var(--card);
  --panel-bg:        var(--card);
  --panel-color:     var(--card);
  --border-color:    var(--border);
  --accent-color:    var(--accent);
  --link-color:      var(--accent);
  --link-hover:      color-mix(in oklab, var(--accent) 70%, black);

  color-scheme: light dark;
}

/* Fallback : si aucun attribut n’est posé, on respecte la préférence système */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]):not(.theme-dark) {
    --bg:        #f7f9fc;
    --fg:        #0d1117;
    --muted:     #5b6573;
    --card:      #ffffff;
    --border:    #e5e9ef;
    --accent:    #2a6df4;

    --bg-color:        var(--bg);
    --fg-color:        var(--fg);
    --text-color:      var(--fg);
    --muted-color:     var(--muted);
    --card-bg:         var(--card);
    --card-color:      var(--card);
    --panel-bg:        var(--card);
    --panel-color:     var(--card);
    --border-color:    var(--border);
    --accent-color:    var(--accent);
    --link-color:      var(--accent);
    --link-hover:      color-mix(in oklab, var(--accent) 70%, black);

    color-scheme: light dark;
  }
}

/* Application minimale pour que les couleurs s’expriment, sans sur-styler le site */
html, body {
  background: var(--bg);
  color: var(--fg);
}
a { color: var(--link-color); }
a:hover { color: var(--link-hover); }