/* ==========================================================================
   Giulia Gazzetta — Design tokens
   Unica fonte per colori, tipografia, spazi, linee e motion.
   Le pagine interne useranno gli stessi token.
   ========================================================================== */

@font-face {
  font-family: "Epilogue";
  src: url("../fonts/epilogue-latin-var.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Fallback metrico per ridurre lo spostamento del layout durante il caricamento */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

:root {
  /* --- Colore ----------------------------------------------------------- */
  --c-ink: #2D3134;              /* Charcoal Ink: testo, titoli, struttura */
  --c-ink-muted: #5E6367;        /* testo secondario (6:1 su bianco) */
  --c-paper: #FFFFFF;            /* fondo principale */
  --c-paper-alt: #F6F5F3;        /* fondo secondario, solo per ritmo */
  --c-accent: #C2185B;           /* rosa di brand, max ~5% dell'interfaccia */
  --c-accent-press: #A3134C;     /* stesso rosa, più profondo: hover/press */

  --c-rule: rgb(45 49 52 / 0.14);         /* hairline */
  --c-rule-strong: var(--c-ink);          /* filetto di apertura sezione */

  /* Superficie scura */
  --c-dark: var(--c-ink);
  --c-on-dark: #FFFFFF;
  --c-on-dark-muted: rgb(255 255 255 / 0.72);
  --c-rule-on-dark: rgb(255 255 255 / 0.18);

  /* --- Tipografia ------------------------------------------------------- */
  --font-display: "Epilogue", "Inter", "Inter Fallback", system-ui, sans-serif;
  --font-text: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Scala fluida: 375px → 1440px */
  --fs-display: clamp(2.125rem, 1.29rem + 3.57vw, 4.5rem);    /* H1 34 → 72 */
  --fs-h2: clamp(1.875rem, 1.48rem + 1.69vw, 3.125rem);       /* H2 30 → 50 */
  --fs-h2-xl: clamp(2rem, 1.2rem + 3.4vw, 4.375rem);          /* statement 32 → 70 */
  --fs-h3: clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem);          /* H3 20 → 24 */
  --fs-callout: clamp(1.5rem, 1.15rem + 1.5vw, 2.375rem);     /* 24 → 38 */
  --fs-lead: clamp(1.1875rem, 1.14rem + 0.19vw, 1.3125rem);   /* 19 → 21 */
  --fs-body: 1.0625rem;                                       /* 17 */
  --fs-small: 0.9375rem;                                      /* 15 */
  --fs-label: 0.78125rem;                                     /* 12.5 */
  --fs-num: clamp(1.75rem, 1.53rem + 0.94vw, 2.375rem);       /* numerazioni 28 → 38 */

  --lh-tight: 1.06;
  --lh-heading: 1.14;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  --tracking-display: -0.028em;
  --tracking-heading: -0.02em;
  --tracking-label: 0.12em;

  --measure: 36rem;        /* ~62 caratteri a 17px */
  --measure-lead: 40rem;

  /* --- Spazi (base 4px) ------------------------------------------------- */
  --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: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --section-pad: clamp(4.5rem, 3.2rem + 5.6vw, 9rem);        /* 72 → 144 */
  --section-head-gap: clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem);

  /* --- Griglia ---------------------------------------------------------- */
  --container: 82.5rem;                                       /* 1320 */
  --gutter: clamp(1.25rem, 0.5rem + 3.2vw, 4rem);             /* 20 → 64 */
  --col-gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);

  /* --- Linee, raggi, livelli -------------------------------------------- */
  --rule: 1px;
  --radius: 2px;
  --header-h: 4.5rem;

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-reveal: 640ms;
}

@media (min-width: 64em) {
  :root { --header-h: 5rem; }
}