/* Design tokens — allineati al prototipo (progetto.md §5) e a docs/redesign.html.
   Il colore e' informazione: ogni ambito ha il suo colore (wayfinding). */

:root,
[data-theme="light"] {
    color-scheme: light;
    --ink: #1A1611;
    --paper: #F5EFE4;
    --paper-2: #EBE3D6;
    --sociale: #E13A3A;
    --formazione: #1C8F5E;
    --eventi: #7A2FE0;
    --altre-attivita: #F2680C;
    --giallo: #F2B705; /* riserva di palette, nessun cluster assegnato ancora */
    /* Varianti "fill" per testo bianco su fondo colorato: garantiscono
       contrasto AA (>=4.5:1) dove il colore ambito fa da sfondo a testo/sigle. */
    --sociale-fill: #B92727;
    --formazione-fill: #146B46;
    --eventi-fill: #5F22B8;
    --altre-attivita-fill: #C24E00;
    --line: rgba(26, 22, 17, .16);
    --line-strong: rgba(26, 22, 17, .88);
    --muted: #4D463C;
    --muted-strong: #3D372E;
    --placeholder: #8F8776;
    --surface-bright: #FAF4EB;
    --bacheca-bg: #1A1611;
    --bacheca-fg: #F5EFE4;
    --bacheca-line: rgba(245, 239, 228, .14);
    --bacheca-hover: rgba(245, 239, 228, .05);
    --overlay: rgba(26, 18, 10, .44);
    --radius: 14px;
    --maxw: 440px;
    --gutter: 20px;

    /* Spacing scale (mobile-first). Usare queste variabili per gap/padding/margin. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 18px;
    --space-6: 20px;
    --space-7: 24px;
    --space-8: 30px;
    --space-9: 34px;
}

[data-theme="dark"] {
    color-scheme: dark;
    --ink: #F4EDE3;
    --paper: #181410;
    --paper-2: #211C16;
    --line: rgba(244, 237, 227, .13);
    --line-strong: rgba(244, 237, 227, .82);
    --muted: #ADA598;
    --muted-strong: #C8C0B4;
    --placeholder: #7E7769;
    --surface-bright: #F4EDE3;
    --bacheca-bg: #0E0C08;
    --bacheca-fg: #F4EDE3;
    --bacheca-line: rgba(244, 237, 227, .11);
    --bacheca-hover: rgba(244, 237, 227, .06);
    --overlay: rgba(14, 10, 6, .58);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        color-scheme: dark;
        --ink: #F4EDE3;
        --paper: #181410;
        --paper-2: #211C16;
        --line: rgba(244, 237, 227, .13);
        --line-strong: rgba(244, 237, 227, .82);
        --muted: #ADA598;
        --muted-strong: #C8C0B4;
        --placeholder: #7E7769;
        --surface-bright: #F4EDE3;
        --bacheca-bg: #0E0C08;
        --bacheca-fg: #F4EDE3;
        --bacheca-line: rgba(244, 237, 227, .11);
        --bacheca-hover: rgba(244, 237, 227, .06);
        --overlay: rgba(14, 10, 6, .58);
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Anti scroll orizzontale: il clip sulla RADICE (html) ritaglia anche gli
   elementi position:fixed fuori schermo (es. il menu off-canvas chiuso), cosa
   che il clip sul solo body non fa. `clip` non rompe l'header sticky. */
html {
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: "Public Sans", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    transition: background-color .25s ease, color .25s ease;
}

body.menu-open {
    overflow: hidden;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

.mono {
    font-family: "Public Sans", system-ui, sans-serif;
}

.display {
    font-family: "Bricolage Grotesque", sans-serif;
    line-height: .98;
    letter-spacing: -.02em;
}

/* Accessibilita': focus tastiera sempre visibile (§7 brief). */
:focus-visible {
    outline: 2.5px solid var(--sociale);
    outline-offset: 2px;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Lo skip-link (e ogni .screen-reader-text focusabile) deve tornare visibile
   quando riceve il focus da tastiera (WCAG 2.4.1 Bypass Blocks). */
.screen-reader-text:focus {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 200;
    width: auto;
    height: auto;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    clip: auto;
    clip-path: none;
    background: var(--paper);
    color: var(--ink);
    border: 1.5px solid var(--line-strong);
    border-radius: 100px;
    font-family: "Public Sans", system-ui, sans-serif;
    font-size: 13px;
    text-decoration: none;
}

/* Enhance-up: mobile-first, il desktop AGGIUNGE (non ripiega). */
@media (min-width: 760px) {
    :root {
        --maxw: 1080px;
        --gutter: 40px;
        --space-5: 20px;
        --space-6: 24px;
        --space-7: 30px;
        --space-8: 40px;
        --space-9: 52px;
    }
}