/* ========================================
   @projet-meduses/commun — VARIABLES CSS PARTAGÉES
   Architecture deux couches :
   - Layer 1 : palette brute (--prefix-nom: #hex)
   - Layer 2 : sémantique commune (--var-usage: var(--prefix-nom))

   Variables projet-spécifiques à déclarer dans
   src/themes/custom.css du projet consommateur.
   ======================================== */

/* ========================================
   GLOBAL
   ======================================== */
:root {
  --radius: 8px;
}

/* ========================================
   LIGHT — GitHub Light Default
   ======================================== */
:root,
[data-theme="light"] {
  /* Layer 1 — Palette GitHub Light Default */
  --lt-bg0:     #ffffff;
  --lt-bg1:     #f6f8fa;
  --lt-bg2:     #eff2f5;
  --lt-bg3:     #e1e4e8;
  --lt-fg0:     #1f2328;
  --lt-fg1:     #1f2328;
  --lt-fg2:     #656d76;
  --lt-fg3:     #9198a1;
  --lt-red:     #d1242f;
  --lt-green:   #1a7f37;
  --lt-yellow:  #9a6700;
  --lt-orange:  #bc4c00;
  --lt-blue:    #0969da;
  --lt-purple:  #8250df;
  --lt-cyan:    #0a7ea4;
  --lt-border:  #d0d7de;

  /* Layer 2 — Sémantique commune */
  --bg-primary:      var(--lt-bg0);
  --bg-secondary:    var(--lt-bg1);
  --bg-tertiary:     var(--lt-bg2);
  --bg-opaque:       var(--lt-bg0);
  --text-primary:    var(--lt-fg1);
  --text-secondary:  var(--lt-fg2);
  --text-muted:      var(--lt-fg3);
  --accent:          var(--lt-green);
  --accent-hover:    #196e30;
  --border:          var(--lt-border);
  --shadow:          rgba(0, 0, 0, 0.08);
  --sidebar-bg:      var(--lt-bg1);
  --popup-bg:        var(--lt-bg0);
  --popup-header-bg: var(--lt-bg2);
  --error-color:     var(--lt-red);
  --warning-color:   var(--lt-yellow);
  --link:            var(--lt-blue);
  --link-hover:      #0550ae;
  --info:            var(--lt-blue);
  --scrollbar-thumb: var(--lt-bg3);
  --scrollbar-track: var(--lt-bg1);
}

/* ========================================
   DARK — GitHub Dark Default
   ======================================== */
[data-theme="dark"] {
  /* Layer 1 — Palette GitHub Dark Default */
  --dk-bg0:      #0d1117;
  --dk-bg1:      #161b22;
  --dk-bg2:      #21262d;
  --dk-bg3:      #30363d;
  --dk-fg0:      #e6edf3;
  --dk-fg1:      #c9d1d9;
  --dk-fg2:      #8b949e;
  --dk-fg3:      #6e7681;
  --dk-red:      #f85149;
  --dk-green:    #3fb950;
  --dk-yellow:   #d29922;
  --dk-orange:   #db6d28;
  --dk-blue:     #58a6ff;
  --dk-blue-lt:  #79c0ff;
  --dk-purple:   #bc8cff;
  --dk-cyan:     #39c5cf;
  --dk-border:   #30363d;

  /* Layer 2 — Sémantique commune */
  --bg-primary:      var(--dk-bg0);
  --bg-secondary:    var(--dk-bg1);
  --bg-tertiary:     var(--dk-bg2);
  --bg-opaque:       var(--dk-bg0);
  --text-primary:    var(--dk-fg1);
  --text-secondary:  var(--dk-fg2);
  --text-muted:      var(--dk-fg3);
  --accent:          var(--dk-green);
  --accent-hover:    #4ccc5e;
  --border:          var(--dk-border);
  --shadow:          rgba(0, 0, 0, 0.5);
  --sidebar-bg:      var(--dk-bg1);
  --popup-bg:        var(--dk-bg1);
  --popup-header-bg: var(--dk-bg0);
  --error-color:     var(--dk-red);
  --warning-color:   var(--dk-yellow);
  --link:            var(--dk-blue);
  --link-hover:      var(--dk-blue-lt);
  --info:            var(--dk-blue);
  --scrollbar-thumb: var(--dk-bg3);
  --scrollbar-track: var(--dk-bg1);
}

/* ========================================
   GRUVBOX — Gruvbox Dark
   ======================================== */
[data-theme="gruvbox"] {
  /* Layer 1 — Palette Gruvbox Dark */
  --gb-bg0-hard:      #1d2021;
  --gb-bg0:           #282828;
  --gb-bg0-soft:      #32302f;
  --gb-bg1:           #3c3836;
  --gb-bg2:           #504945;
  --gb-bg3:           #665c54;
  --gb-bg4:           #7c6f64;
  --gb-fg0:           #fbf1c7;
  --gb-fg1:           #ebdbb2;
  --gb-fg2:           #d5c4a1;
  --gb-fg3:           #bdae93;
  --gb-fg4:           #a89984;
  --gb-red:           #cc241d;
  --gb-green:         #98971a;
  --gb-yellow:        #d79921;
  --gb-blue:          #458588;
  --gb-purple:        #b16286;
  --gb-aqua:          #689d6a;
  --gb-orange:        #d65d0e;
  --gb-gray:          #928374;
  --gb-bright-red:    #fb4934;
  --gb-bright-green:  #b8bb26;
  --gb-bright-yellow: #fabd2f;
  --gb-bright-blue:   #83a598;
  --gb-bright-purple: #d3869b;
  --gb-bright-aqua:   #8ec07c;
  --gb-bright-orange: #f38019;
  --gb-bright-gray:   #a89984;

  /* Layer 2 — Sémantique commune */
  --bg-primary:      var(--gb-bg0-hard);
  --bg-secondary:    var(--gb-bg0);
  --bg-tertiary:     var(--gb-bg1);
  --bg-opaque:       var(--gb-bg0-hard);
  --text-primary:    var(--gb-fg1);
  --text-secondary:  var(--gb-fg2);
  --text-muted:      var(--gb-gray);
  --accent:          var(--gb-aqua);
  --accent-hover:    var(--gb-bright-aqua);
  --border:          var(--gb-bg1);
  --shadow:          rgba(0, 0, 0, 0.4);
  --sidebar-bg:      var(--gb-bg0);
  --popup-bg:        var(--gb-bg0);
  --popup-header-bg: var(--gb-bg0-hard);
  --error-color:     var(--gb-red);
  --warning-color:   var(--gb-bright-yellow);
  --link:            var(--gb-blue);
  --link-hover:      var(--gb-bright-blue);
  --info:            var(--gb-bright-blue);
  --scrollbar-thumb: var(--gb-bg2);
  --scrollbar-track: var(--gb-bg0-hard);
}

/* ========================================
   OCEAN — Solarized modifié (fond bleu)
   ======================================== */
[data-theme="ocean"] {
  /* Layer 1 — Palette Océan (Solarized modifié) */
  /* Couleurs solides */
  --oc-base-deep:      #0c2e42;
  --oc-base:           #143f57;
  --oc-base-panel:     #1a5570;
  --oc-base-hover:     #1e6380;
  --oc-popup-hdr:      #0e3348;
  --oc-fg:             #ebebeb;
  --oc-fg-md:          #b8ccd0;
  --oc-fg-muted:       #7a969c;
  --oc-yellow:         #b58900;
  --oc-orange:         #cb4b16;
  --oc-red:            #f66760;
  --oc-red-alt:        #dc322f;
  --oc-magenta:        #d33682;
  --oc-violet:         #6c71c4;
  --oc-blue:           #268bd2;
  --oc-cyan:           #0c8487;
  --oc-cyan-lt:        #10a3a7;
  --oc-green:          #859900;
  --oc-gold:           #d4802a;
  --oc-border:         #265a72;
  /* Variantes alpha */
  --oc-base-a87:       #143f57dd; /* base à 87% */
  --oc-base-deep-a87:  #0c2e42dd; /* deep à 87% */
  --oc-base-panel-a80: #1a5570cc; /* panel à 80% */
  --oc-base-a93:       #143f57ee; /* base à 93% */
  --oc-scrollbar-a67:  #4a7a80aa; /* thumb scrollbar à 67% */

  /* Layer 2 — Sémantique commune */
  --bg-primary:      var(--oc-base-a87);
  --bg-secondary:    var(--oc-base-deep-a87);
  --bg-tertiary:     var(--oc-base-panel-a80);
  --bg-opaque:       var(--oc-base-deep);
  --text-primary:    var(--oc-fg);
  --text-secondary:  var(--oc-fg-md);
  --text-muted:      var(--oc-fg-muted);
  --accent:          var(--oc-cyan);
  --accent-hover:    var(--oc-cyan-lt);
  --border:          var(--oc-border);
  --shadow:          rgba(0, 0, 0, 0.4);
  --sidebar-bg:      var(--oc-base-deep-a87);
  --popup-bg:        var(--oc-base);
  --popup-header-bg: var(--oc-popup-hdr);
  --error-color:     var(--oc-red);
  --warning-color:   var(--oc-yellow);
  --link:            var(--oc-blue);
  --link-hover:      #4aa3e0;
  --info:            var(--oc-blue);
  --scrollbar-thumb: var(--oc-scrollbar-a67);
  --scrollbar-track: transparent;
}

/* ========================================
   HIGH CONTRAST — GitHub Dark High Contrast
   ======================================== */
[data-theme="highcontrast"] {
  /* Layer 1 — Palette GitHub Dark High Contrast */
  --hc-bg0:     #0a0c10;
  --hc-bg1:     #0d1117;
  --hc-bg2:     #161b22;
  --hc-bg3:     #21262d;
  --hc-fg0:     #ffffff;
  --hc-fg1:     #f0f3f6;
  --hc-fg2:     #cdd9e5;
  --hc-fg3:     #adbac7;
  --hc-red:     #f85149;
  --hc-green:   #3fb950;
  --hc-yellow:  #d29922;
  --hc-orange:  #db6d28;
  --hc-blue:    #58a6ff;
  --hc-purple:  #bc8cff;
  --hc-cyan:    #39c5cf;
  --hc-border:  #444c56;

  /* Layer 2 — Sémantique commune */
  --bg-primary:      var(--hc-bg0);
  --bg-secondary:    var(--hc-bg1);
  --bg-tertiary:     var(--hc-bg2);
  --bg-opaque:       var(--hc-bg0);
  --text-primary:    var(--hc-fg1);
  --text-secondary:  var(--hc-fg2);
  --text-muted:      var(--hc-fg3);
  --accent:          var(--hc-green);
  --accent-hover:    #4ccc5e;
  --border:          var(--hc-border);
  --shadow:          rgba(0, 0, 0, 0.6);
  --sidebar-bg:      var(--hc-bg1);
  --popup-bg:        var(--hc-bg1);
  --popup-header-bg: var(--hc-bg0);
  --error-color:     var(--hc-red);
  --warning-color:   var(--hc-yellow);
  --link:            var(--hc-blue);
  --link-hover:      #79c0ff;
  --info:            var(--hc-blue);
  --scrollbar-thumb: var(--hc-bg3);
  --scrollbar-track: var(--hc-bg0);
}

/* ========================================
   SCROLLBAR
   ======================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius);
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}