/* Valori della direzione di stile (DESIGN.md). Le pagine usano questi nomi, mai valori a mano. */

@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  /* marca */
  --blu: #1F6FEB;
  --ciano: #12B4D1;
  --verde-acqua: #2FC6A6;
  --sfumatura-marca: linear-gradient(135deg, var(--blu), var(--ciano) 55%, var(--verde-acqua));

  /* tipografia */
  --font: "Manrope", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-fissa: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-vetrina: clamp(2.75rem, 1.6rem + 4.4vw, 4.5rem);
  --t-titolo-1: clamp(2.25rem, 1.3rem + 4vw, 4rem);
  --t-titolo-2: clamp(1.75rem, 1.2rem + 2.3vw, 2.75rem);
  --t-titolo-3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --t-attacco: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  --t-corpo: 1.0625rem;
  --t-piccolo: 0.875rem;
  --t-etichetta: 0.75rem;
  --larghezza-testo: 40rem;

  /* spazi (scala da 4 px) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem;
  --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --s-11: 10rem;
  --sezione: clamp(5rem, 3rem + 6vw, 8rem);
  --contenuto: 70rem;
  --margine: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* forma */
  --r-etichetta: 6px; --r-piccolo: 12px; --r-scheda: 20px; --r-grande: 28px; --r-pillola: 999px;

  /* movimento */
  --d-veloce: 150ms; --d-comparsa: 250ms; --d-blocco: 400ms; --d-apertura: 1200ms;
  --curva-uscita: cubic-bezier(0.16, 1, 0.3, 1);
  --curva-morbida: cubic-bezier(0.215, 0.61, 0.355, 1); /* più distesa: per i momenti lunghi */

  /* tema scuro (predefinito) */
  color-scheme: dark;
  --fondo: #070B14;
  --superficie: #0B1220;
  --superficie-2: #111A2C;
  --fondo-secondario: #111A2C;
  --bordo: rgba(255, 255, 255, 0.08);
  --bordo-forte: rgba(255, 255, 255, 0.16);
  --testo: #F5F7FA;
  --testo-2: #A3AEC2;
  --testo-3: #7B879C;
  --primario: #1F6FEB;
  --primario-hover: #3A82F5;
  --primario-testo: #5B9BFF;
  --accento: #2FC6A6;
  --successo: #2FC6A6;
  --attenzione: #F5B544;
  --errore: #FF6B6B;
  --ombra: none;
  --luce-bordo: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --luce-marca: 0.35;
  --vetro: rgba(7, 11, 20, 0.72);
}

@media (prefers-color-scheme: light) {
  :root:not([data-tema="scuro"]) {
    color-scheme: light;
    --fondo: #F5F7FA;
    --superficie: #FFFFFF;
    --superficie-2: #EDF1F6;
    --fondo-secondario: #FFFFFF;
    --bordo: rgba(11, 18, 32, 0.10);
    --bordo-forte: rgba(11, 18, 32, 0.18);
    --testo: #0B1220;
    --testo-2: #4A5568;
    --testo-3: #5E6B80;
    --primario-hover: #1A5FD0;
    --primario-testo: #1A5FD0;
    --accento: #0E7C6B;
    --successo: #0E7C6B;
    --attenzione: #8A5A00;
    --errore: #C62828;
    --ombra: 0 1px 2px rgba(11, 18, 32, 0.06), 0 12px 32px rgba(11, 18, 32, 0.06);
    --luce-bordo: none;
    --luce-marca: 0.22;
    --vetro: rgba(245, 247, 250, 0.75);
  }
}

:root[data-tema="chiaro"] {
  color-scheme: light;
  --fondo: #F5F7FA;
  --superficie: #FFFFFF;
  --superficie-2: #EDF1F6;
  --fondo-secondario: #FFFFFF;
  --bordo: rgba(11, 18, 32, 0.10);
  --bordo-forte: rgba(11, 18, 32, 0.18);
  --testo: #0B1220;
  --testo-2: #4A5568;
  --testo-3: #5E6B80;
  --primario-hover: #1A5FD0;
  --primario-testo: #1A5FD0;
  --accento: #0E7C6B;
  --successo: #0E7C6B;
  --attenzione: #8A5A00;
  --errore: #C62828;
  --ombra: 0 1px 2px rgba(11, 18, 32, 0.06), 0 12px 32px rgba(11, 18, 32, 0.06);
  --luce-bordo: none;
  --luce-marca: 0.22;
  --vetro: rgba(245, 247, 250, 0.75);
}