/* ============================================================
   MITAL — Design tokens (TASK 02 §3.1)
   Regola 80/15/5: neutri come struttura, foto come colore,
   brand solo come firma. --color-brand è PLACEHOLDER (ottone)
   finché non arrivano gli HEX ufficiali dal logo vettoriale 2023.
   ============================================================ */

@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;
  /* Rosso ufficiale dal logo vettoriale MITAL (punto della i).
     #EE1F24 su bianco = 4.3:1 → ok per elementi grafici e testo grande;
     per testi normali e fondi pulsante si usa la variante scura (5.7:1 AA). */
  --color-brand: #EE1F24;
  --color-brand-dark: #C9151A;
  --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(2rem, 1.6rem + 1.2vw, 2.5rem);        /* 32–40px */
  --text-display: clamp(3rem, 1.8rem + 3.8vw, 5rem);     /* 48–80px */
  --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-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);
  --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;
}