/* ════════════════════════════════════════════════════════════
   THEME.CSS — token di colore unici del sito (piano: docs/plans/TEMA_E_RESTYLE.md).
   Caricato per primo da partials/asset-loader.php. Tema = attributo data-theme su <html> (layouts/main.php).

   Regole:
   - nei CSS pubblici usa solo var(--sog-*), mai colori scritti a mano;
   - i token "derivati" (color-mix) seguono da soli testo/accento: cambiando --sog-accent cambiano bordi, glow, sfondi tenui;
   - le vecchie famiglie (--en-*, --acc-*, --f-*, --guides-*, --star-*) sono alias in fondo al file, da eliminare man mano
     che i file passano ai token. panel.css ridefinisce --en-* con valori fissi: admin/vendor restano scuri.
   - prove dei colori: Theme Lab (public/js/theme-lab.js, solo admin) → "Esporta CSS" → incolla qui.
════════════════════════════════════════════════════════════ */

/* ── Tema scuro (predefinito): base "Blu notte e lime" con accento blu, scelto e ritoccato dall'utente il 2026-10-13 col Theme Lab ── */
:root,
:root[data-theme="dark"] {
  --sog-page-bg: var(--sog-bg);
  --sog-bg: #0d1320;
  --sog-bg-2: #121a2b;
  --sog-surface: #162033;
  --sog-panel: #162033;
  --sog-panel-hover: #1c2840;
  --sog-text: #e6edf7;
  --sog-accent: #4f67c4;
  --sog-accent-text: color-mix(in srgb, var(--sog-accent) 70%, var(--sog-text));
  --sog-accent-strong: color-mix(in srgb, var(--sog-accent) 70%, var(--sog-bg));
  --sog-on-accent: #ffffff;
  --sog-border-soft: rgba(200, 220, 255, 0.09);
  --sog-gold: #fbbf24;
  --sog-on-gold: #1f1600; /* testo/icone su fondo oro pieno (2026-10-13, home) */
  --sog-star: #fbbf24;
  --sog-star-off: rgba(255, 255, 255, 0.22); /* invariato */
  --sog-danger: #f87171; /* invariato */
  --sog-radius: 14px; /* invariato */
  --sog-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); /* invariato */
  --sog-shadow-hover: 0 16px 44px rgba(0, 0, 0, 0.55), 0 0 26px color-mix(in srgb, var(--sog-accent) 14%, transparent); /* invariato */
}

/* ── Tema chiaro: base "Grigio e petrolio" con accento blu, scelto e ritoccato dall'utente il 2026-10-13 ── */
:root[data-theme="light"] {
  --sog-page-bg: var(--sog-bg);
  --sog-bg: #eef1f4;
  --sog-bg-2: #ffffff;
  --sog-surface: #ffffff;
  --sog-panel: #ffffff;
  --sog-panel-hover: #f8fafc;
  --sog-text: #16202a;
  --sog-text-faint: color-mix(in srgb, var(--sog-text) 56%, transparent); /* su fondo chiaro il 48% scende sotto 3:1 */
  --sog-accent: #0d4fa5;
  --sog-accent-text: color-mix(in srgb, var(--sog-accent) 70%, var(--sog-text));
  --sog-accent-strong: color-mix(in srgb, var(--sog-accent) 70%, var(--sog-bg));
  --sog-on-accent: #ffffff;
  --sog-border-soft: rgba(15, 30, 45, 0.12);
  --sog-gold: #a16207;
  --sog-on-gold: #ffffff;
  --sog-star: #b45309;
  --sog-star-off: rgba(0, 0, 0, 0.18);
  --sog-danger: #c62828; /* invariato */
  --sog-radius: 14px; /* invariato */
  --sog-shadow: 0 6px 24px rgba(15, 30, 45, 0.10); /* invariato */
  --sog-shadow-hover: 0 12px 32px rgba(15, 30, 45, 0.16); /* invariato */
}
/* ── Token derivati e forma (uguali nei due temi) ── */
:root {
  --sog-text-muted:        color-mix(in srgb, var(--sog-text) 68%, transparent);
  --sog-text-faint:        color-mix(in srgb, var(--sog-text) 48%, transparent);

  --sog-surface-hover:     color-mix(in srgb, var(--sog-accent) 6%, transparent);
  --sog-surface-2:         color-mix(in srgb, var(--sog-accent) 12%, transparent);
  --sog-accent-soft:       color-mix(in srgb, var(--sog-accent) 12%, transparent);
  --sog-accent-soft-hover: color-mix(in srgb, var(--sog-accent) 18%, transparent);
  --sog-accent-glow:       color-mix(in srgb, var(--sog-accent) 35%, transparent);
  --sog-border:            color-mix(in srgb, var(--sog-accent) 18%, transparent);
  --sog-border-strong:     color-mix(in srgb, var(--sog-accent) 45%, transparent);
  --sog-gold-soft:         color-mix(in srgb, var(--sog-gold) 15%, transparent);
  --sog-gold-text:         color-mix(in srgb, var(--sog-gold) 78%, var(--sog-text)); /* oro come testo: il chiaro puro sta sotto 4.5:1 */
  /* piastrina dei loghi di banche/shop: bianca nei due temi (quasi tutti i loghi sono JPG su fondo bianco) */
  --sog-logo-plate:        #ffffff;
  --sog-on-logo-plate:     #16202a;

  --sog-radius:            14px;
  /* Font (2026-10-13, da 8 a 2): DM Sans per testo e interfaccia, Montserrat per i titoli. Self-hosted in fonts.css.
     Il fallback di sistema copre anche th/zh (i woff2 sono solo subset latin). */
  --sog-font-body:         'DM Sans', system-ui, sans-serif;
  --sog-font-head:         'Montserrat', 'DM Sans', system-ui, sans-serif;

  /* Card del catalogo (2026-10-13, scelte dell'utente col prototipo; docs/plans/RESTYLE_CATALOGO.md).
     Badge sulla foto: uguali nei due temi, testo bianco (contrasto ≥ 4.5). */
  --sog-badge-fem:         #d63384;
  --sog-badge-reg:         #15803d;
  --sog-badge-auto:        #c62828;
  --sog-badge-photo:       #1d5fd1;
  --sog-on-badge:          #ffffff;
  /* icone dei dati: tinta propria mescolata col testo → leggibile in chiaro e in scuro */
  --sog-ic-thc:            color-mix(in srgb, #e5484d 75%, var(--sog-text));
  --sog-ic-cbd:            color-mix(in srgb, #30a46c 75%, var(--sog-text));
  --sog-ic-time:           color-mix(in srgb, #3e63dd 70%, var(--sog-text));
  --sog-ic-yield:          color-mix(in srgb, var(--sog-gold) 80%, var(--sog-text));
  --sog-ic-indica:         color-mix(in srgb, #8e4ec6 75%, var(--sog-text));
  --sog-like:              #e5486b;
  /* barre (Indica/Sativa della card, cursori del pannello Genetica): colori pieni, non mescolati col testo — sono superfici, non testo */
  --sog-bar-indica:        #7c3aed;
  --sog-bar-sativa:        #f59e0b;
  --sog-bar-thc:           #e5484d;
  --sog-bar-cbd:           #1fa971;
  /* filtri del catalogo (icone di pannelli e voci; anche testo attivo: contrasto ≥ 4 in entrambi i temi) */
  --sog-ic-banks:          color-mix(in srgb, #f76b15 75%, var(--sog-text));
  --sog-ic-medical:        color-mix(in srgb, #12a594 75%, var(--sog-text));
  --sog-ic-effects:        color-mix(in srgb, #d6409f 75%, var(--sog-text));
  --sog-ic-pack:           color-mix(in srgb, #0090ff 70%, var(--sog-text));
}

/* ════════════════════════════════════════════════════════════
   ALIAS delle vecchie famiglie (Fase 0). Ognuna sparisce quando i file che la usano passano a --sog-*.
════════════════════════════════════════════════════════════ */
:root {
  /* "Emerald Noir": header.css, strain.css, search-modal.css, account_widget.css, index.css, admin-telegram.css */
  --en-bg:        var(--sog-bg);
  --en-bg-2:      var(--sog-bg-2);
  --en-glass:     var(--sog-surface);
  --en-line:      var(--sog-border);
  --en-line-soft: var(--sog-border-soft);
  --en-em:        var(--sog-accent);
  --en-em-bright: var(--sog-accent-text);
  --en-em-deep:   var(--sog-accent-strong);
  --en-em-glow:   var(--sog-accent-glow);
  --en-text:      var(--sog-text);
  --en-text-dim:  var(--sog-text-muted);
  --en-radius:    var(--sog-radius);
  --en-shadow:    var(--sog-shadow);

  /* account, login, contatori (style.css, account.css) */
  --acc-bg:           var(--sog-bg);
  --acc-panel:        var(--sog-panel);
  --acc-panel-hover:  var(--sog-panel-hover);
  --acc-border:       var(--sog-border);
  --acc-border-light: var(--sog-border-soft);
  --acc-primary:      var(--sog-accent);
  --acc-primary-dim:  var(--sog-accent-soft);
  --acc-primary-glow: var(--sog-accent-glow);
  --acc-text:         var(--sog-text);
  --acc-text-muted:   var(--sog-text-muted);

  /* catalogo e filtri (recre.css, catalogue*.css, strain-card.css) */
  --f-bg:        var(--sog-bg-2);
  --f-panel:     var(--sog-surface-2);
  --f-border:    var(--sog-border);
  --f-green:     var(--sog-accent);
  --f-green-dim: var(--sog-accent-soft);
  --f-gold:      var(--sog-gold);
  --f-gold-dim:  var(--sog-gold-soft);
  --f-text:      var(--sog-text);
  --f-muted:     var(--sog-text-faint);

  /* guide (guides.css, admin-guides.css) */
  --guides-primary:       var(--sog-accent);
  --guides-primary-dim:   var(--sog-accent-strong);
  --guides-accent:        var(--sog-accent-text);
  --guides-light:         var(--sog-accent-soft);
  --guides-light-hover:   var(--sog-accent-soft-hover);
  --guides-text:          var(--sog-text);
  --guides-text-dim:      var(--sog-text-muted);
  --guides-muted:         var(--sog-text-faint);
  --guides-border:        var(--sog-border);
  --guides-border-hover:  var(--sog-border-strong);
  --guides-bg:            var(--sog-bg);
  --guides-card-bg:       var(--sog-surface);
  --guides-card-bg-hover: var(--sog-surface-hover);
  --guides-shadow:        var(--sog-shadow);
  --guides-shadow-hover:  var(--sog-shadow-hover);

  /* stelle delle recensioni (style.css) */
  --star-on:  var(--sog-star);
  --star-off: var(--sog-star-off);
}