/* ============================================================
   MFX // FLOW — DESIGN TOKENS
   Unica fonte di verità per colori, tipografia, spazio, motion.
   Nessun valore hardcoded altrove nel progetto.
   ============================================================ */

:root {

  /* --- COLORE ------------------------------------------------
     Il viola è un accento, non una superficie.
     Regola: massimo un elemento accentato per schermata.
  ------------------------------------------------------------ */
  --bg:            #0D0D0D;   /* fondo primario */
  --surface:       #171717;   /* card, superfici elevate */
  --surface-hi:    #1E1E1E;   /* hover delle superfici */
  --text:          #F5F5F5;   /* testo primario */
  --muted:         #B4B4BC;   /* testo secondario, label — schiarito per leggibilità su mobile */
  --faint:         #7C7C84;   /* metadati, footer */
  --accent:        #8B5CF6;   /* viola MFX */
  --accent-soft:   rgba(139, 92, 246, 0.30);
  --accent-ghost:  rgba(139, 92, 246, 0.08);

  /* Bordi: su fondo nero la profondità la fa la hairline, non il blur */
  --hairline:      rgba(245, 245, 245, 0.08);
  --hairline-hi:   rgba(245, 245, 245, 0.16);

  /* Ombra unica di sistema */
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.30);

  /* --- TIPOGRAFIA -------------------------------------------- */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Scala fluida: mobile-first, il desktop è solo più ampio */
  --fs-display: clamp(3.4rem, 13vw, 8.5rem);
  --fs-h1:      clamp(2.4rem, 7.5vw, 4.6rem);
  --fs-h2:      clamp(2rem, 5vw, 3.4rem);
  --fs-h3:      clamp(1.35rem, 3vw, 1.75rem);
  --fs-lead:    clamp(1.05rem, 2.2vw, 1.3rem);
  --fs-body:    1.0625rem;   /* 17px */
  --fs-sm:      0.9375rem;   /* 15px  */
  --fs-eyebrow: 0.6875rem;   /* 11px  */

  --lh-display: 0.94;
  --lh-title:   1.08;
  --lh-body:    1.72;

  --tracking-eyebrow: 0.18em;
  --tracking-logo:    0.14em;

  /* Misura di riga: mai testo a piena larghezza su desktop */
  --measure: 62ch;

  /* --- SPAZIO (scala 4px) ------------------------------------ */
  --s-1: 4px;    --s-2: 8px;    --s-3: 12px;   --s-4: 16px;
  --s-5: 24px;   --s-6: 32px;   --s-7: 48px;   --s-8: 64px;
  --s-9: 96px;   --s-10: 128px; --s-11: 160px; --s-12: 200px;

  /* Ritmo verticale: dashboard, non magazine.
     Ogni schermata deve avere una funzione, non solo respiro. */
  --section-y: 72px;

  /* --- LAYOUT ------------------------------------------------ */
  --container: 1180px;
  --gutter: var(--s-5);
  --nav-h: 68px;

  /* --- RAGGI ------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Area touch minima sui controlli */
  --tap: 48px;

  /* --- MOTION ------------------------------------------------ */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-hover: 200ms;
  --t-state: 300ms;
  --t-reveal: 700ms;
}

/* Desktop: più respiro, non più elementi */
@media (min-width: 900px) {
  :root {
    --section-y: var(--s-10);
    --gutter: var(--s-6);
    --nav-h: 80px;
  }
}