/* ============================================================
   MITAL — Design tokens (TASK 02 §3.1)
   Regola 80/15/5: neutri come struttura, foto come colore,
   brand solo come firma. Accento: scala ambra a 2 tinte (scelta
   cliente 2/9/2026, sostituisce il blu elettrico; logo = evo mono).
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colori */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F4F2;
  --color-text: #111111;
  --color-text-soft: #8A8A8A;
  /* Scala ambra (richiesta cliente 2/9/2026, sostituisce il blu elettrico).
     Due tinte con due ruoli distinti, perché l'ambra è chiara e i rapporti
     di contrasto reali non permettono di usarne una sola:
       #EDA602 su bianco = 1.9:1  → MAI per testo, icone o hairline di stato.
                                     Solo come RIEMPIMENTO: fondi bottone,
                                     pallini, swatch, barre, micro-grafica.
       #111111 su #EDA602 = 9.3:1 → il testo sopra l'ambra è sempre nero,
                                     mai bianco (bianco su ambra = 1.9:1).
       #8A6100 su bianco = 5.2:1  → WCAG AA: è questa la tinta di TESTI,
                                     LINK, icone e bordi che devono leggersi.
     In breve: fondo = --color-brand, testo/link = --color-brand-dark. */
  --color-brand: #EDA602;
  --color-brand-dark: #8A6100;
  --color-logo: #231F20;       /* nero del marchio */
  --color-line: #E3E1DD;

  /* Tipografia — una famiglia, gerarchia per dimensione non per peso */
  --font-sans: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --text-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);   /* 16–18px */
  --text-h2: clamp(1.375rem, 1.2rem + 0.55vw, 1.625rem); /* 22–26px */
  --text-display: clamp(2rem, 1.55rem + 1.4vw, 2.6875rem); /* 32–43px */
  --text-label: 0.8125rem;                               /* 13px codici/etichette */
  --leading-body: 1.6;
  --tracking-label: 0.05em;

  /* Spaziatura — scala 8pt */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  /* --space-5 mancava ma il footer mobile la usava: con una variabile inesistente il
     browser scartava tutto il padding-block e il logo finiva attaccato al filetto nero. */
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-15: 120px;
  --space-20: 160px;
  --section-gap: clamp(64px, 4vw + 40px, 160px); /* 64–80 mobile → 120–160 desktop */

  /* Layout */
  --grid-gutter: 24px;
  --page-margin: max(5vw, 24px);
  /* distanza dal bordo viewport al contenuto del .container (che ha
     max-width 1600px centrato): per allineare elementi position:absolute */
  --container-inset: max(var(--page-margin), calc((100vw - 1600px) / 2 + var(--page-margin)));
  --measure: 720px;          /* larghezza massima del testo */
  --header-h: 76px;

  /* Motion — poche, lente, coerenti */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-hover: 0.6s;
  --dur-reveal: 0.7s;

  /* Coerenza col riferimento: zero raggi, zero ombre */
  --radius: 0;
  --shadow: none;
}