/* ============================================================================
   DIREZIONE "TRAIETTORIA" -- file dei token
   Cacciapuoti Traslochi e Trasporti, prova di direzione creativa 2026-08-17.

   Questo file contiene SOLO variabili. La pagina non definisce nessun colore,
   nessuna misura e nessuna durata al di fuori di qui: e' il motivo per cui un
   remix (i colori di un'altra direzione su questo impianto, o un'altra scala
   tipografica) costa minuti e non ore.
   ========================================================================== */

:root {

  /* --- COLORE ------------------------------------------------------------
     Scuro dominante. Il fondo non e' il navy del marchio ma un blu-nero piu'
     profondo, cosi' il navy #011730 puo' fare da PIANO RIALZATO invece che da
     fondo: e' quello che da' profondita' senza aggiungere colori.
     L'arancio non e' un accento decorativo, e' l'unica sorgente di luce della
     pagina. Tutti i valori derivano dalla palette rilevata dal sito vivo il
     2026-08-17, tranne --flame, che e' #EF6C00 alzato in luminosita' perche'
     su fondo scuro l'arancio del marchio si spegne.                        */

  --ink: #00070F;
  /* fondo assoluto */
  --ink-2: #011730;
  /* piano rialzato, navy del marchio */
  --ink-3: #002752;
  /* secondo piano rialzato */
  --navy: #002B5B;
  --blue: #004F88;
  --sky: #70A9E0;
  --sky-pale: #E0ECF8;
  --paper: #F6F9FC;

  --orange: #EF6C00;
  /* arancio del marchio, per i campi pieni */
  --flame: #FF7A1A;
  /* arancio-luce, per testo e filetti su fondo scuro (7,7:1) */
  --ember: #FFA726;
  /* arancio chiaro del marchio, per le alte luci */

  --text: var(--sky-pale);
  --text-mute: #8FA3B8;
  --line: rgba(112, 169, 224, .18);
  --line-strong: rgba(112, 169, 224, .34);

  /* --- DUOTONO SULLE FOTOGRAFIE ------------------------------------------
     Ogni fotografia della pagina passa per due strati: le ombre vanno a
     --duo-shadow, le alte luci a --duo-light. E' il trattamento che toglie
     alle immagini di repertorio l'aspetto di repertorio e le fa sembrare una
     campagna sola. Cambiare questi due valori ricolora tutta la pagina.     */

  --duo-shadow: #08284F;
  --duo-light: #FFC894;
  --duo-filter: grayscale(1) contrast(1.34) brightness(.74);

  /* --- TIPOGRAFIA --------------------------------------------------------
     Archivo in larghezza espansa (wdth 118-125) sui titoli: e' la firma
     tipografica della direzione. Instrument Sans sul testo corrente.
     JetBrains Mono su ogni annotazione di bozza: le etichette tecniche sono
     un elemento di progetto, non un residuo da togliere.                    */

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wdth-display: 122;
  --wdth-display-xl: 118;

  --fs-mono: clamp(.62rem, .52rem + .3vw, .74rem);
  --fs-body: clamp(1rem, .95rem + .3vw, 1.125rem);
  --fs-lead: clamp(1.06rem, .98rem + .5vw, 1.28rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem);
  --fs-h2: clamp(2.1rem, 1.5rem + 3vw, 4.2rem);
  --fs-h1: clamp(2.9rem, 1.9rem + 5.4vw, 7.4rem);
  --fs-num: clamp(3.2rem, 2rem + 6vw, 7rem);

  --lh-display: .92;
  --lh-body: 1.62;
  --tracking-display: -.03em;
  --tracking-mono: .17em;

  /* --- SPAZIO E FORMA ----------------------------------------------------
     Nessun angolo arrotondato oltre i 2px: la direzione e' squadrata, e la
     rotondita' e' la scorciatoia con cui un mockup sembra un tema comprato. */

  --gap-xs: .5rem;
  --gap-s: 1rem;
  --gap-m: 1.75rem;
  --gap-l: 3rem;
  --gap-xl: clamp(4rem, 8vw, 8rem);
  --pad-x: clamp(1.25rem, 5vw, 5.5rem);
  --max-w: 1320px;
  --measure: 58ch;

  --radius: 2px;
  --hairline: 1px;
  --rule: 3px;

  /* --- MOVIMENTO ---------------------------------------------------------
     La direzione e' su "movimento continuo": qualcosa in pagina si muove
     sempre, anche da fermi (respiro della fotografia, nastro, bagliore). I
     tetti sono qui e non nel codice, cosi' si smorzano tutti insieme.       */

  --dur-1: 180ms;
  /* stati: pressione, passaggio del puntatore */
  --dur-2: 620ms;
  /* comparse */
  --dur-3: 1150ms;
  /* rivelazioni dei titoli */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);

  --loop-breath: 26s;
  /* respiro della fotografia di apertura */
  --loop-glow: 11s;
  /* pulsazione del bagliore arancio */
  --loop-marquee: 34s;
  /* nastro continuo */
  --loop-grain: .7s;
  /* grana cinematografica */

  --zoom-breath: 1.09;
  /* tetto assoluto dell'ingrandimento continuo */
  --stagger: 90ms;
  /* ritardo a scaletta fra elementi in fila */

  /* --- CROMO DI BOZZA ----------------------------------------------------
     La fascia di bozza e' un componente di progetto con la sua altezza, non
     un adesivo appiccicato sopra: tutto il resto della pagina la scala.     */

  --ribbon-h: 30px;
  --grain-opacity: .5;
}