/* ============================================================
   ARVIO · tokens.css
   Custom properties globali. Fonte di verita del sistema visivo.
   Sezione 1: token del brief (sezione 5) implementati verbatim.
   Sezione 2: estensioni operative, marcate, necessarie alla resa.
   ============================================================ */

:root {
  /* ---- Colors ---- */
  --navy: #0A1628;
  --navy-mid: #152236;
  --copper: #B87A5A;
  --copper-light: #D4986A;
  /* Copper scuro per TESTO piccolo su fondo chiaro (WCAG AA 4.5:1 su bianco e
     parchment). Il copper standard resta per decori, bordi e testo su navy. */
  --copper-text: #8A5840;
  --parchment: #F2EEE8;
  --stone: #6B6B68;
  --white: #FFFFFF;

  /* ---- Typography families ---- */
  --font-display: 'Cormorant SC', Georgia, 'Times New Roman', serif;
  --font-body: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-ui: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Type scale fluida ---- */
  /* min abbassato (era 3rem / 2.4rem) per evitare rotture di parola del
     display su mobile; valori massimi del brief invariati. Vedi nota D1. */
  --fs-display: clamp(2.25rem, 6vw, 5.5rem);
  --fs-h1: clamp(2rem, 4.5vw, 4.2rem);
  --fs-h2: clamp(1.8rem, 3vw, 2.6rem);
  --fs-h3: clamp(1.3rem, 2vw, 1.6rem);
  --fs-body-large: clamp(1.125rem, 1.4vw, 1.375rem);
  --fs-body: clamp(1rem, 1.15vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* ---- Line heights ---- */
  --lh-display: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.7;
  --lh-tight: 1.4;

  /* ---- Letter spacing ---- */
  --tracking-display: 0.04em;
  --tracking-sc: 0.18em;
  --tracking-ui: 0.12em;
  --tracking-eyebrow: 0.22em;
  --tracking-body: 0.005em;

  /* ---- Spacing scale ---- */
  --space-xxs: 0.5rem;
  --space-xs: 1rem;
  --space-s: 2rem;
  --space-m: 4rem;
  --space-l: 8rem;
  --space-xl: 12rem;
  --space-xxl: 16rem;

  /* ---- Containers ---- */
  --container-max: 1280px;
  --container-narrow: 920px;
  --container-editorial: 720px;
  --container-prose: 640px;

  /* ---- Borders ---- */
  --border-thin: 1px solid var(--copper);
  --border-hair: 0.5px solid var(--stone);
  --divider-copper-width: 64px;
  --radius-cta: 10px;

  /* ---- Transitions ---- */
  --t-slow: 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-medium: 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 200ms cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ========================================================
     ESTENSIONI OPERATIVE (oltre il brief, marcate per l'art-director)
     Necessarie a focus, gerarchia di sovrapposizione, header, blur.
     Nessun nuovo colore: solo derivazioni funzionali della palette.
     ======================================================== */

  /* Padding di sezione fluido: scende verso --space-m su viewport corte */
  --section-pad: clamp(var(--space-m), 11vw, var(--space-l));

  /* Gutter orizzontale del container, fluido */
  --gutter: clamp(var(--space-s), 5vw, var(--space-m));

  /* Stato focus accessibile (sezione 9.3 del brief) */
  --focus-ring: 2px solid var(--copper);
  --focus-offset: 2px;

  /* Header / navigation · barra piu bassa, logo piu grande (feedback Davide) */
  --header-h: 4.75rem;
  --nav-blur: saturate(120%) blur(10px);
  --navy-translucent: rgba(10, 22, 40, 0.82); /* var(--navy) all'82% per la nav sticky */

  /* Velo navy sulle fotografie istituzionali (sezioni 8.6 / 9.2) */
  --photo-veil: rgba(10, 22, 40, 0.35);

  /* Bordi tenui derivati dalla palette */
  --hairline-stone: rgba(107, 107, 104, 0.2); /* Stone 20% · card-parchment */
  --hairline-parchment: rgba(242, 238, 232, 0.14);

  /* Gerarchia z. Il header sta SOPRA l'overlay mobile, cosi logo e
     controllo di chiusura (X) restano visibili e cliccabili a menu aperto. */
  --z-base: 1;
  --z-overlay: 1000;
  --z-nav: 1100;
  --z-skip: 1200;
}