/* ============================================================
   SHERBETH 2026 — Tema chiaro / scuro
   Pattern: :root = chiaro · media dark (senza scelta esplicita)
   + [data-theme="dark"] (scelta col toggle) = scuro.
   I componenti usano SOLO i token: qui si ridefiniscono i token.
   ============================================================ */
:root{
  --bg:#FFFFFF;
  --bg-soft:#FFF4FA;
  --surface:#FFFFFF;
  --text:#231F20;
  --night:#231F20;                    /* fondo fisso sezioni scure (Cutò, footer) */
  --header-bg:rgba(255,255,255,.92);
  --card-border:rgba(242,207,227,.65);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1A1118;
    --link:#EF6BA8;
    --bg-soft:#221723;
    --surface:#271A25;
    --text:#F6EBF1;
    --muted:#C2A5B4;
    --line:#45303D;
    --blush-2:#3A2431;
    --header-bg:rgba(26,17,24,.92);
    --card-border:rgba(69,48,61,.8);
    --shadow-card:0 10px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
    --shadow-card-hover:0 18px 44px rgba(199,0,117,.28), 0 4px 12px rgba(0,0,0,.35);
  }
  :root:not([data-theme="light"]) .site-header.scrolled .logo-dark{display:none}
  :root:not([data-theme="light"]) .site-header.scrolled .logo-white{display:block}
  :root:not([data-theme="light"]) .site-header.scrolled .lang-switch button{color:var(--text)}
  :root:not([data-theme="light"]) .site-header.scrolled .burger span{background:var(--text)}
  :root:not([data-theme="light"]) .site-header.scrolled .main-nav a{color:var(--text)}
  :root:not([data-theme="light"]) .card-link, :root:not([data-theme="light"]) .svc .card-link, :root:not([data-theme="light"]) .mag-body .read{color:var(--link)}
}
:root[data-theme="dark"]{
  --bg:#1A1118;
  --link:#EF6BA8;
  --bg-soft:#221723;
  --surface:#271A25;
  --text:#F6EBF1;
  --muted:#C2A5B4;
  --line:#45303D;
  --blush-2:#3A2431;
  --header-bg:rgba(26,17,24,.92);
  --card-border:rgba(69,48,61,.8);
  --shadow-card:0 10px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  --shadow-card-hover:0 18px 44px rgba(199,0,117,.28), 0 4px 12px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .site-header.scrolled .logo-dark{display:none}
:root[data-theme="dark"] .site-header.scrolled .logo-white{display:block}
:root[data-theme="dark"] .site-header.scrolled .lang-switch button{color:var(--text)}
:root[data-theme="dark"] .site-header.scrolled .burger span{background:var(--text)}
:root[data-theme="dark"] .site-header.scrolled .main-nav a{color:var(--text)}
  :root[data-theme="dark"] .card-link, :root[data-theme="dark"] .svc .card-link, :root[data-theme="dark"] .mag-body .read{color:var(--link)}

/* toggle tema nell'header */
/* L'INTERRUTTORE DEL TEMA: sole e luna DISEGNATI DA NOI (8 ottobre 2026).
   Erano due emoji, e un'emoji la disegna il sistema di chi guarda: un comando che
   cambia faccia a seconda del telefono e' il peggior posto dove metterne una.
   `color` esplicito e non ereditato: i due disegni usano `currentColor`, e senza
   una regola sarebbero bianchi anche sull'intestazione chiara — cioe' invisibili. */
.theme-toggle{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.55);background:transparent;cursor:pointer;
  color:#fff;display:grid;place-items:center;transition:.2s;line-height:1;
}
.theme-toggle svg{display:block;width:18px;height:18px}
.theme-toggle:hover{background:rgba(255,255,255,.15)}
.site-header.scrolled .theme-toggle{border-color:var(--line);color:var(--text)}
.site-header.scrolled .theme-toggle:hover{background:var(--blush-2)}
@media (max-width:640px){.theme-toggle{width:32px;height:32px}.theme-toggle svg{width:16px;height:16px}}