/* =============================================================================
   Token del tema jmclement.

   I sedici colori sono quelli del sito precedente, invariati. Quello che manca
   e viene introdotto qui sono i token per spazi, raggi, ombre e tipografia: nel
   vecchio style.css erano valori scritti a mano in ogni regola, con sette ombre
   diverse e il breakpoint dichiarato due volte.
   ========================================================================== */

:root {
    /* --- Colori, tema chiaro ------------------------------------------- */
    --primary-color: #0078D7;   /* il blu della lampadina del logo */
    --secondary-color: #005699;
    --accent-color: #00A2FF;

    --text-color: #333333;
    --text-muted: #5f6b76;
    --bg-color: #ffffff;
    --card-bg: #f5f5f5;
    --header-bg: #f0f8ff;
    --border-color: #e0e0e0;

    --tag-bg: #e6f2ff;
    --tag-text: #0067be;

    --input-bg: #ffffff;
    --input-text: #333333;

    --success-bg: #d4edda;
    --success-text: #155724;
    --error-bg: #f8d7da;
    --error-text: #721c24;

    /* Erano scritti a mano nel CSS, fuori dalla mappa dei colori. */
    --danger-color: #dc3545;
    --info-bg: #cce5ff;
    --info-text: #004085;

    /* Alone della lampadina: unico elemento decorativo del sito. */
    --glow-color: rgba(0, 120, 215, 0.18);
    --shadow-color: 0, 0, 0;

    /* --- Tipografia ---------------------------------------------------- */
    /* Nessun webfont, come prima: zero richieste di rete per il testo. */
    --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Liberation Mono', Menlo, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-4xl: clamp(2.25rem, 5vw, 3.25rem);

    --leading-tight: 1.15;
    --leading-normal: 1.6;
    --tracking-tight: -0.02em;
    --tracking-wide: 0.08em;

    /* --- Spazi ---------------------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;

    /* --- Forma ---------------------------------------------------------- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* Tre livelli al posto dei sette valori distinti di prima. */
    --shadow-sm: 0 1px 2px rgba(var(--shadow-color), 0.06);
    --shadow-md: 0 4px 12px rgba(var(--shadow-color), 0.10);
    --shadow-lg: 0 12px 28px rgba(var(--shadow-color), 0.16);

    --transition-base: 0.2s ease;
    --transition-slow: 0.35s ease;

    --container-width: 1140px;
    --content-width: 68ch;

    /* Anello di focus: prima usava il blu di una palette precedente. */
    --focus-ring: 0 0 0 3px rgba(0, 120, 215, 0.35);
}

/* -----------------------------------------------------------------------------
   Tema scuro.

   Segue la preferenza di sistema, che il sito precedente ignorava: partiva
   sempre dal chiaro finché non si toccava l'interruttore. La scelta esplicita
   dell'utente, salvata in localStorage, ha comunque la precedenza.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --secondary-color: #66B8FF;

        --text-color: #e0e0e0;
        --text-muted: #9aa4ae;
        --bg-color: #121212;
        --card-bg: #1e1e1e;
        --header-bg: #1a1a2e;
        --border-color: #333333;

        --tag-bg: #1e3a5f;
        --tag-text: #89c4ff;

        --input-bg: #2a2a2a;
        --input-text: #e0e0e0;

        --success-bg: #1e4a30;
        --success-text: #9be6b3;
        --error-bg: #4a1e23;
        --error-text: #f5c6cb;

        --info-bg: #1c3a5f;
        --info-text: #9ec5fe;

        --glow-color: rgba(0, 162, 255, 0.22);
        --shadow-color: 0, 0, 0;

        --shadow-sm: 0 1px 2px rgba(var(--shadow-color), 0.4);
        --shadow-md: 0 4px 12px rgba(var(--shadow-color), 0.5);
        --shadow-lg: 0 12px 28px rgba(var(--shadow-color), 0.6);

        --focus-ring: 0 0 0 3px rgba(102, 184, 255, 0.45);
    }
}

:root[data-theme="dark"] {
    /* --primary-color e --accent-color non compaiono qui: nei due temi hanno
       lo stesso valore e si ereditano da :root. */
    --secondary-color: #66B8FF;

    --text-color: #e0e0e0;
    --text-muted: #9aa4ae;
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --header-bg: #1a1a2e;
    --border-color: #333333;

    --tag-bg: #1e3a5f;
    --tag-text: #89c4ff;

    --input-bg: #2a2a2a;
    --input-text: #e0e0e0;

    --success-bg: #1e4a30;
    --success-text: #9be6b3;
    --error-bg: #4a1e23;
    --error-text: #f5c6cb;

    --info-bg: #1c3a5f;
    --info-text: #9ec5fe;

    --glow-color: rgba(0, 162, 255, 0.22);

    --shadow-sm: 0 1px 2px rgba(var(--shadow-color), 0.4);
    --shadow-md: 0 4px 12px rgba(var(--shadow-color), 0.5);
    --shadow-lg: 0 12px 28px rgba(var(--shadow-color), 0.6);

    --focus-ring: 0 0 0 3px rgba(102, 184, 255, 0.45);
}