/*
  tokens.css — tutti i valori di design del sito, in un unico blocco.
  Diventeranno theme.json nella versione WordPress.

  Le misure sono fluide: valgono il valore iPhone a 390 px di larghezza
  e il valore desktop a 1440 px, e scorrono in modo lineare tra i due.
  Fonte: design/v2/SPEC.md
*/
:root {
  /* Colori */
  --color-bg: #FFFFFF;
  --color-text: #000000;
  --color-accent: #FFE135;               /* testo cliccabile al passaggio del mouse */
  --color-placeholder: #E9E9E7;
  --color-placeholder-text: #5C5C59;
  --color-veil: rgb(0 0 0 / 0.16);       /* velo sulle anteprime video, per leggere il triangolo */

  /* Tipografia */
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --tracking-ui: -0.01em;
  --tracking-tight: -0.03em;
  --tracking-info: -0.025em;

  --fs-ui: clamp(17px, 14.4px + 0.667vw, 24px);        /* nome, menu, etichette, capitoli */
  --fs-home: clamp(22px, 19.03px + 0.762vw, 30px);     /* "Racconta Storie" */
  --fs-list: clamp(30px, 17.37px + 3.238vw, 64px);     /* elenco categorie */
  --fs-title: clamp(40px, 31.09px + 2.286vw, 64px);    /* titolo pagina categoria */
  --fs-info: clamp(28px, 21.31px + 1.714vw, 46px);     /* frase della pagina Info */
  --fs-placeholder: clamp(15px, 13.89px + 0.286vw, 18px);

  --lh-ui: 1.3;
  --lh-list: 1.12;
  --lh-list-phone: 1.45;
  --lh-info: 1.16;
  --lh-info-phone: 1.18;

  /* Griglia */
  --grid-columns: 12;
  --grid-margin: clamp(20px, 9.6px + 2.667vw, 48px);
  --grid-gap: clamp(12px, 7.54px + 1.143vw, 24px);
  --phone-max: 767px;                    /* sotto questa larghezza: layout iPhone (usato nelle media query) */

  /* Spazi */
  --header-top: clamp(8px, 2.667vw - 2.4px, 36px);
  --nav-gap: clamp(14px, 8.8px + 1.333vw, 28px);
  --tap: 44px;                           /* altezza minima delle aree toccabili su cellulare */
  --space-top-list: clamp(120px, 95.86px + 6.19vw, 185px);
  --space-top-page: clamp(96px, 81.51px + 3.714vw, 135px);
  --space-bottom: clamp(64px, 43.2px + 5.333vw, 120px);
  --space-section: clamp(80px, 50.29px + 7.619vw, 160px); /* tra un capitolo e l'altro */
  --space-chapter: clamp(20px, 9.6px + 2.667vw, 48px);    /* nome del capitolo -> galleria */
  --space-index: 28px;                   /* etichetta -> elenco, su cellulare */
  --contact-gap: clamp(32px, 26.06px + 1.524vw, 48px);

  /* Dimensioni */
  --logo-size: clamp(24px, 20.29px + 0.952vw, 34px);
  --logo-stroke: 3.2;
  --play-size: clamp(36px, 32.29px + 0.952vw, 48px);
  --play-size-small: clamp(36px, 34.51px + 0.381vw, 40px);
  --portrait-phone: 175px;
  --radius: 0;
  --focus-ring: 2px;
  --focus-offset: 4px;

  /* Movimento (usati in motion.css e motion.js) */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in-out-soft: cubic-bezier(0.45, 0, 0.2, 1);
  --dur-hover: 350ms;
  --dur-page-out: 420ms;
  --dur-page-in: 720ms;
  --dur-reveal: 1100ms;
  --dur-image: 1400ms;
  --dur-logo: 1800ms;
  --reveal-distance: 28px;
  --reveal-stagger: 90ms;
  --image-zoom: 1.035;
}