/* Omissify — design tokens e utility di base.
   Fonte di verità: BRANDBOOK.md. Solo bianco e nero: nessun colore di accento.
   Unica eccezione: --color-error, solo per gli errori dei moduli (BRANDBOOK.md §4 e §12). */

:root {
  /* Colori */
  --color-ink: #000000;          /* logo, titoli, pulsanti primari, nastro */
  --color-paper: #ffffff;        /* sfondo pagina */
  --color-text: #171717;         /* testo corrente (contrasto 17.9:1 su bianco) */
  --color-text-muted: #5c5c5c;   /* testo secondario (6.7:1 su bianco). Mai più chiaro. */
  --color-border: #e5e5e5;       /* filetti, bordi delle card */
  --color-surface: #f5f5f5;      /* riquadri e sezioni alternate */
  --color-focus: #000000;
  --color-error: #b42318;        /* solo errori dei moduli: rosso della finestra dell'estensione (6.6:1 su bianco) */

  /* Tipografia */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --text-display: clamp(2.5rem, 1.2rem + 5vw, 4.5rem);   /* 40 → 72 px */
  --text-h1: clamp(2rem, 1.1rem + 3.4vw, 3.25rem);       /* 32 → 52 px */
  --text-h2: clamp(1.5rem, 1rem + 1.6vw, 2rem);          /* 24 → 32 px */
  --text-h3: 1.25rem;                                    /* 20 px */
  --text-body: 1.0625rem;                                /* 17 px */
  --text-small: 0.875rem;                                /* 14 px */

  /* Spazi (scala di 4 px) */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px;  --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  --grid-gutter: var(--space-5); /* spazio fra le dodici colonne della griglia */

  /* Forme */
  --radius-sm: 6px;        /* pulsanti, campi */
  --radius-md: 12px;       /* card */
  --radius-tile: 22%;      /* icona quadrata (28/128) */
  --shadow-overlay: 0 12px 32px rgb(0 0 0 / 0.08);  /* l'unica ombra: solo elementi sovrapposti (menu a tendina) */
  --container: 1120px;
  --container-narrow: 720px;

  /* Movimento */
  --duration: 180ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Bordo strappato del nastro: lati sinistro/destro irregolari, alto e basso dritti.
     Generato dallo stesso disegno del logo. Vale per qualunque larghezza. */
  --tape-clip: polygon(
    calc(100% - 6.6px) 0%, calc(100% - 0.2px) 9.4%, calc(100% - 6.7px) 18%, calc(100% - 2.1px) 27.7%,
    calc(100% - 7px) 36.4%, calc(100% - 2.4px) 46.9%, calc(100% - 5.6px) 53.6%, calc(100% - 0.8px) 65.2%,
    calc(100% - 8px) 70.4%, calc(100% - 0.9px) 84.1%, calc(100% - 5.8px) 91.5%, calc(100% - 2.6px) 100%,
    5.6px 100%, 1.8px 89.6%, 6.2px 82.9%, 0.4px 75.2%, 8px 62.5%, 1.4px 55.4%,
    6.7px 46.2%, 1.3px 38.1%, 6.5px 27.1%, 2.5px 16.9%, 5.9px 6.9%, 1.2px 0%
  );
}

/* Sezioni nere: stesse variabili, invertite. Usare con <section data-theme="dark">.
   Legata a "body": così un data-theme messo sulla radice <html> da chi ospita la pagina (per esempio
   un'anteprima in tema scuro) non annerisce l'intero sito. */
body [data-theme="dark"] {
  --color-ink: #ffffff;
  --color-paper: #000000;
  --color-text: #f5f5f5;
  --color-text-muted: #a3a3a3;   /* 8.3:1 su nero */
  --color-border: #2a2a2a;
  --color-surface: #111111;
  --color-focus: #ffffff;
  --color-error: #c2412d;        /* terracotta dell'estensione: 4.1:1 su nero, SOTTO AA per il testo (BRANDBOOK.md §4) */
  background: var(--color-paper);
  color: var(--color-text);
}

/* Base */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display { font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--color-ink); margin: 0; }
.display { font-size: var(--text-display); line-height: 1.02; letter-spacing: -0.035em; }
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); letter-spacing: -0.02em; }
h3 { font-size: var(--text-h3); letter-spacing: -0.01em; line-height: 1.3; }
a { color: inherit; text-underline-offset: 3px; }
strong, b { font-weight: 600; }   /* grassetto mai oltre 600 (BRANDBOOK.md §5); il browser userebbe 700 */
code, .placeholder { font-family: var(--font-mono); font-size: 0.92em; }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.container { width: min(100% - 2 * var(--space-5), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--space-5), var(--container-narrow)); margin-inline: auto; }
.section { padding-block: var(--space-9); }
@media (max-width: 720px) { .section { padding-block: var(--space-8); } }

/* Nastro: il motivo grafico del marchio. Usarlo con parsimonia (vedi BRANDBOOK.md §6). */
.tape {
  display: inline-block;
  background: var(--color-ink);
  color: transparent;            /* il testo sotto il nastro non si legge */
  clip-path: var(--tape-clip);
  padding: 0.02em 0.3em;
  user-select: none;
}
.tape--block { display: block; height: 1.1em; }

/* Testo solo per screen reader */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Pulsanti */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 0.8em 1.25em; min-height: 44px;
  font: 500 var(--text-body)/1 var(--font-sans);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-ink);
  text-decoration: none; cursor: pointer;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.btn--primary { background: var(--color-ink); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-text); }
.btn--secondary { background: transparent; color: var(--color-ink); }
.btn--secondary:hover { background: var(--color-surface); }

/* Card */
.card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); background: var(--color-paper); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}