/**
 * THEME SYSTEM — Liquid Glass (Apple-style)
 *
 * Principi:
 * - UN solo accento (indigo) + colori di sistema iOS per stati (success/danger)
 * - Vetro NEUTRO: pannelli bianco/nero traslucidi, mai pannelli colorati
 * - Blur alto + saturate(180%): la firma del vetro Apple
 * - Riflesso speculare: highlight interno sul bordo superiore di ogni lastra
 * - Ombre stratificate: contatto netto + ambiente morbido
 * - Movimento minimo, curve a molla (sheet curve di iOS)
 */

/* ───────────────────────── DARK ───────────────────────── */
:root[data-theme="dark"],
html[data-theme="dark"] {
  --bg-main: #07080f;
  --bg-secondary: #0b0d1a;
  --bg-tertiary: #121527;

  /* Materiali vetro (neutri, mai colorati) */
  --glass-primary: rgba(22, 25, 41, 0.55);
  --glass-secondary: rgba(255, 255, 255, 0.06);
  --glass-thick: rgba(24, 27, 45, 0.72);          /* modali, dock */
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-border-hover: rgba(255, 255, 255, 0.18);
  --glass-border-active: rgba(255, 255, 255, 0.28);
  /* Riflesso speculare: luce dall'alto sulla lastra */
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --glass-highlight-strong: inset 0 1px 0 rgba(255, 255, 255, 0.18);

  /* Accento unico (indigo glass) + supporto */
  --accent-cyan: #6e85ff;        /* legacy alias → ora indigo chiaro */
  --accent-purple: #9d7bff;
  --accent-magenta: #c98bff;     /* legacy alias → violetto soft */
  --accent-orange: #ff9f0a;      /* iOS orange (usato raramente) */
  --accent-pink: #ff8fab;

  --text-primary: #f5f6fa;
  --text-secondary: #b9c0d4;
  --text-muted: #8a93ab;
  --text-disabled: #5d6478;

  /* Ombre stratificate (contatto + ambiente) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.22), 0 16px 40px -14px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.26), 0 28px 70px -18px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 0 transparent; /* niente neon: il glow non è Apple */

  --blur-glass: blur(40px);
  --blur-glass-hover: blur(44px);
  --saturate-glass: saturate(180%);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;

  --duration-fast: 150ms;
  --duration-normal: 240ms;
  --duration-slow: 380ms;
  /* Curva "sheet" di iOS */
  --easing-smooth: cubic-bezier(0.32, 0.72, 0, 1);
  --easing-bounce: cubic-bezier(0.34, 1.3, 0.5, 1);
}

/* ───────────────────────── LIGHT ───────────────────────── */
:root[data-theme="light"],
html[data-theme="light"] {
  --bg-main: #eef0f9;
  --bg-secondary: #e9edf8;
  --bg-tertiary: #e2e7f5;

  --glass-primary: rgba(255, 255, 255, 0.58);
  --glass-secondary: rgba(255, 255, 255, 0.42);
  --glass-thick: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-border-hover: rgba(255, 255, 255, 0.85);
  --glass-border-active: rgba(90, 108, 243, 0.45);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --glass-highlight-strong: inset 0 1px 0 rgba(255, 255, 255, 0.95);

  --accent-cyan: #5a6cf3;
  --accent-purple: #7d5cf0;
  --accent-magenta: #a86ef5;
  --accent-orange: #ff9500;      /* iOS orange */
  --accent-pink: #ff7da9;

  --text-primary: #1b2030;
  --text-secondary: #49526b;
  --text-muted: #6e7890;
  --text-disabled: #9aa3b8;

  --shadow-sm: 0 1px 2px rgba(28, 35, 90, 0.06);
  --shadow-md: 0 2px 8px rgba(28, 35, 90, 0.06), 0 18px 44px -16px rgba(28, 35, 90, 0.20);
  --shadow-lg: 0 4px 12px rgba(28, 35, 90, 0.08), 0 30px 70px -20px rgba(28, 35, 90, 0.28);
  --shadow-glow: 0 0 0 transparent;

  --blur-glass: blur(36px);
  --blur-glass-hover: blur(40px);
  --saturate-glass: saturate(170%);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;

  --duration-fast: 150ms;
  --duration-normal: 240ms;
  --duration-slow: 380ms;
  --easing-smooth: cubic-bezier(0.32, 0.72, 0, 1);
  --easing-bounce: cubic-bezier(0.34, 1.3, 0.5, 1);
}

/* ───────────────── DEFAULTS (pre-hydration) ───────────────── */
:root {
  --bg-main: #07080f;
  --glass-primary: rgba(22, 25, 41, 0.55);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --accent-cyan: #6e85ff;
  --accent-magenta: #c98bff;
  --accent-orange: #ff9f0a;
  --text-primary: #f5f6fa;
  --text-secondary: #b9c0d4;
  --text-muted: #8a93ab;
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.22), 0 16px 40px -14px rgba(0, 0, 0, 0.55);
  --blur-glass: blur(40px);
  --saturate-glass: saturate(180%);
  --radius-lg: 20px;
  --duration-normal: 240ms;
  --easing-smooth: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ───────────── BACKWARD COMPAT MAPPING ─────────────
   Centinaia di stili inline usano questi nomi: restano validi. */
:root[data-theme="dark"],html[data-theme="dark"] {
  --bg: var(--bg-main);
  --surface: var(--glass-primary);
  --surface-strong: var(--glass-secondary);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --primary: #7c8cff;            /* accento unico */
  --primary-light: #9aa6ff;
  --primary-dark: #5b63f5;
  --accent: #a78bfa;             /* supporto violetto, vicino al primary */
  --accent-light: #c4b5fd;
  --danger: #ff453a;             /* iOS system red (dark) */
  --success: #30d158;            /* iOS system green (dark) */
  --border: var(--glass-border);
  --shadow: var(--shadow-md);
  --glass-blur: 40px;
  --color-border: var(--glass-border);
  --color-text: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
}

:root[data-theme="light"],html[data-theme="light"] {
  --bg: var(--bg-main);
  --surface: var(--glass-primary);
  --surface-strong: var(--glass-secondary);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --primary: #5a6cf3;
  --primary-light: #7d8cf7;
  --primary-dark: #4554e8;
  --accent: #7d5cf0;
  --accent-light: #a48ff5;
  --danger: #ff3b30;             /* iOS system red */
  --success: #34c759;            /* iOS system green */
  --border: var(--glass-border);
  --shadow: var(--shadow-md);
  --glass-blur: 36px;
  --color-border: var(--glass-border);
  --color-text: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
}

html,body {
  background-color: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* ═══════════════════════════════════════════════════════════════
   "Liquid Glass" elevato — materiali vetro premium (dark + light).
   Leggibilità: blur + saturazione (frosted uniforme leggibile) invece di
   pura trasparenza. Blur tenuto a un livello sostenibile per la GPU; su
   mobile è ridotto ulteriormente (vedi media query in fondo).
   ═══════════════════════════════════════════════════════════════ */
:root[data-theme="dark"], html[data-theme="dark"] {
  --glass-primary: rgba(18, 21, 36, 0.44);
  --glass-secondary: rgba(255, 255, 255, 0.07);
  --glass-thick: rgba(20, 23, 40, 0.60);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-border-hover: rgba(255, 255, 255, 0.30);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.30);
  --blur-glass: blur(44px);
  --blur-glass-hover: blur(48px);
  --saturate-glass: saturate(210%);
  --shadow-md: 0 3px 12px rgba(0,0,0,0.30), 0 28px 70px -18px rgba(0,0,0,0.66);
  --shadow-lg: 0 8px 22px rgba(0,0,0,0.34), 0 48px 110px -22px rgba(0,0,0,0.78);
}
:root[data-theme="light"], html[data-theme="light"] {
  --glass-primary: rgba(255, 255, 255, 0.40);
  --glass-secondary: rgba(255, 255, 255, 0.26);
  --glass-thick: rgba(255, 255, 255, 0.58);
  --glass-border: rgba(255, 255, 255, 0.90);
  --glass-border-hover: rgba(255, 255, 255, 1);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 1);
  --blur-glass: blur(42px);
  --blur-glass-hover: blur(46px);
  --saturate-glass: saturate(200%);
  --shadow-md: 0 3px 14px rgba(40,50,110,0.10), 0 28px 64px -18px rgba(40,50,110,0.26);
  --shadow-lg: 0 8px 24px rgba(40,50,110,0.12), 0 50px 110px -24px rgba(40,50,110,0.32);
}

/* Sheen speculare sulle card (luce dall'alto) + rim luminoso: firma del
   vetro premium. Si somma al colore traslucido senza coprirlo. */
.card {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 46%);
}
html[data-theme="light"] .card {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0) 52%);
}

/* Tracce barre macro: tono fisso indipendente da --glass-secondary (così non
   spariscono con superfici traslucide). */
.fridge-bar { background: rgba(120,130,170,0.28); }
html[data-theme="light"] .fridge-bar { background: rgba(90,100,160,0.20); }

/* ── PERFORMANCE: mobile ── il backdrop blur grande è costoso sui telefoni.
   Riduco il raggio e rendo le superfici più opache, così il frosted regge
   con molto meno lavoro GPU (e meno jank in scroll). */
@media (max-width: 640px) {
  :root[data-theme="dark"], html[data-theme="dark"] {
    --glass-primary: rgba(18, 21, 36, 0.66);
    --glass-thick: rgba(20, 23, 40, 0.80);
    --blur-glass: blur(22px);
    --blur-glass-hover: blur(24px);
    --saturate-glass: saturate(150%);
  }
  :root[data-theme="light"], html[data-theme="light"] {
    --glass-primary: rgba(255, 255, 255, 0.70);
    --glass-thick: rgba(255, 255, 255, 0.82);
    --blur-glass: blur(20px);
    --blur-glass-hover: blur(22px);
    --saturate-glass: saturate(150%);
  }
}

/* A11y: chi chiede meno trasparenza (OS) ottiene superfici quasi opache. */
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme="dark"], html[data-theme="dark"] { --glass-primary: rgba(18,21,36,0.94); --glass-thick: rgba(20,23,40,0.97); }
  :root[data-theme="light"], html[data-theme="light"] { --glass-primary: rgba(255,255,255,0.94); --glass-thick: rgba(255,255,255,0.97); }
}

/* Fallback: browser senza backdrop-filter → superfici opache (niente vetro
   trasparente illeggibile). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="dark"], html[data-theme="dark"] { --glass-primary: rgba(18,21,36,0.96); --glass-thick: rgba(20,23,40,0.98); }
  :root[data-theme="light"], html[data-theme="light"] { --glass-primary: rgba(255,255,255,0.96); --glass-thick: rgba(255,255,255,0.98); }
}