/* ============================================================
   tokens.css — sistema di design dell'officina notturna.
   Un solo posto per luce, materia, ritmo e tempo.
   ============================================================ */

:root {
  /* ---- Materia: profondità dell'officina ----
     Dal fondo assoluto alla superficie illuminata. La crema calda è la
     superficie del banco, il grafite è la notte, l'ambra è la luce di
     lavoro, il ciano è il segnale di strumentazione (solo accenti). */
  --bg-0: #0b0d10;
  --bg-1: #101318;
  --bg-2: #151922;
  --bg-3: #1c212c;
  --bg-4: #242b38;
  --panel: #12161d;
  --panel-hi: #1a202a;
  --cream: #f2ead9;
  --ink: #12100c;

  --line: rgba(242, 234, 217, 0.10);
  --line-strong: rgba(242, 234, 217, 0.18);
  --line-hot: rgba(255, 180, 84, 0.38);

  /* ---- Inchiostro ---- */
  --text: #f4efe4;
  --text-dim: #c7bfae;
  --text-mute: #8f887a;
  --text-faint: #5f5a50;

  /* ---- Accento: ambra elettrica (la luce del banco) ---- */
  --accent: #ffb454;
  --accent-strong: #ffcc7f;
  --accent-deep: #d98f24;
  --accent-soft: rgba(255, 180, 84, 0.14);
  --accent-softer: rgba(255, 180, 84, 0.07);
  --accent-border: rgba(255, 180, 84, 0.45);
  --accent-ink: #17130c;

  /* ---- Segnale: ciano freddo (dati, stato) — uso parsimonioso ---- */
  --signal: #7fdcf0;
  --signal-soft: rgba(111, 214, 232, 0.12);
  --signal-border: rgba(111, 214, 232, 0.34);
  --ok: #7ed0a4;
  --err: #ff8172;

  /* ---- Tipografia ----
     Tre voci: display condensato (titoli, tutto maiuscolo), editoriale
     (body), handwritten (annotazioni marker). I font di sistema restano la
     base reale: nessuna richiesta di rete, nessun salto di layout. */
  --font-display: "Arial Narrow", "Roboto Condensed", "Anton", "Impact", "Arial Black", "Avenir Next Condensed", "Helvetica Neue Condensed", system-ui, sans-serif;
  --font-body: "Space Grotesk", "Avenir Next", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-editorial: "Iowan Old Style", "Palatino Linotype", "Palatino", "Georgia", "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  --font-hand: "Segoe Print", "Bradley Hand", "Comic Sans MS", "Chalkboard SE", cursive;

  --fs-2xs: 0.66rem;
  --fs-xs: 0.74rem;
  --fs-sm: 0.88rem;
  --fs-md: 1rem;
  --fs-lg: clamp(1.08rem, 0.98rem + 0.5vw, 1.3rem);
  --fs-xl: clamp(1.6rem, 1.25rem + 1.6vw, 2.5rem);
  --fs-2xl: clamp(2.1rem, 1.45rem + 3.2vw, 4.1rem);
  --fs-3xl: clamp(2.8rem, 1.9rem + 5.4vw, 6.4rem);
  --fs-hero: clamp(3.1rem, 2rem + 7.4vw, 9.6rem);

  --tracking-wide: 0.2em;
  --tracking-mid: 0.12em;
  --tracking-tight: -0.025em;

  /* ---- Ritmo ---- */
  --space-1: 0.35rem;
  --space-2: 0.75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3.25rem;
  --space-6: clamp(3.5rem, 9vw, 6.5rem);
  --space-7: clamp(5rem, 13vw, 9rem);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  --maxw: 1280px;
  --maxw-text: 66ch;
  --nav-h: 74px;

  /* ---- Luce ---- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px -10px rgba(0, 0, 0, 0.7);
  --shadow-3: 0 28px 60px -26px rgba(0, 0, 0, 0.9);
  --glow-accent: 0 0 0 1px var(--accent-border), 0 18px 44px -24px rgba(255, 180, 84, 0.55);
  --glow-signal: 0 0 22px -6px rgba(111, 214, 232, 0.5);

  /* ---- Tempo ---- */
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 460ms;
  --dur-4: 820ms;
  --dur-5: 1200ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --focus: 2px solid var(--accent);
  --focus-offset: 3px;

  /* ---- La discesa ----
     `--depth` va da 0 a 1 lungo tutta la pagina dopo l'hero. 0 è l'officina
     in quota: laboriosa, ambra, grana. 1 è il fondo: silenzio, crema. */
  --depth: 0;
  --strata-1: #0b0d10;
  --strata-2: #141a20;
  --strata-3: #1b1308;
  --horizon: #ffb454;
  --horizon-deep: #7a4a2e;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* ---- Fondamenta hero officina ---- */
:root {
  --hero-viewport-h: calc(100vh - var(--nav-h));
  --hero-scroll-run: 170vh;
  --hero-track-h: calc(var(--hero-viewport-h) + var(--hero-scroll-run));
  --hero-bg: #0a0c0f;
  --hero-overlay: rgba(10, 12, 15, 0.45);
  --hero-glow: rgba(255, 180, 84, 0.16);
  --hero-led: #ffb454;
  --hero-led-dim: rgba(255, 180, 84, 0.28);
}

@supports (height: 100svh) {
  :root {
    --hero-viewport-h: calc(100svh - var(--nav-h));
    --hero-scroll-run: 170svh;
  }
}
@supports (height: 100dvh) {
  :root {
    --hero-viewport-h: calc(100dvh - var(--nav-h));
    --hero-scroll-run: 170dvh;
  }
}

/* Telefoni in orizzontale: più area utile e corsa hero più breve. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
  :root {
    --nav-h: 58px;
    --hero-scroll-run: 85vh;
  }
}
@supports (height: 100svh) {
  @media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
    :root { --hero-scroll-run: 85svh; }
  }
}
@supports (height: 100dvh) {
  @media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
    :root { --hero-scroll-run: 85dvh; }
  }
}