/* Aether: palette e tipografia dal brief allegato. */
/* ============================================================
   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, la grafite è la notte, il rame è la luce di
     lavoro, la salvia è il segnale di strumentazione (solo accenti). */
  --surface-light: linear-gradient(180deg, rgba(251, 239, 230, 0.012) 0%, rgba(251, 239, 230, 0.003) 35%, rgba(0, 0, 0, 0.14) 70%, rgba(0, 0, 0, 0.26) 100%);
  /* Materiale fotografico generato: JPEG di riserva, WebP preferito. */
  --surface-texture: none;
  --surface-texture: none;
  --bg-0: #140A08;
  --bg-1: #1C0F0A;
  --bg-2: #28160F;
  --bg-3: #321B12;
  --bg-4: #3A1E12;
  --panel: #21120D;
  --panel-hi: #301A12;
  --cream: #FBEFE6;
  --ink: #140A08;

  --line: rgba(251, 239, 230, 0.10);
  --line-strong: rgba(251, 239, 230, 0.18);
  --line-hot: rgba(255, 122, 61, 0.38);

  /* ---- Inchiostro ---- */
  --text: #FBEFE6;
  --text-dim: #E2C8B8;
  --text-mute: #D2AE98;
  --text-faint: #C39A82;

  /* ---- Accento: rame caldo (la luce del banco) ---- */
  --accent: #FF7A3D;
  --accent-strong: #FFA06B;
  --accent-deep: #E2612F;
  --accent-soft: rgba(255, 122, 61, 0.14);
  --accent-softer: rgba(255, 122, 61, 0.07);
  --accent-border: rgba(255, 122, 61, 0.45);
  --accent-ink: #140A08;

  /* ---- Segnale: salvia desaturata (dati, stato) — uso parsimonioso ---- */
  --signal: #8FE3A8;
  --signal-soft: rgba(143, 227, 168, 0.12);
  --signal-border: rgba(143, 227, 168, 0.34);
  --ok: #8FE3A8;
  --err: #FF8B82;

  /* ---- 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: "Chakra Petch", "Segoe UI", sans-serif;
  --font-body: "Fira Code", ui-monospace, Consolas, monospace;
  --font-editorial: "Chakra Petch", "Segoe UI", sans-serif;
  --font-mono: "Fira Code", ui-monospace, Consolas, monospace;
  --font-hand: "Fira Code", ui-monospace, Consolas, monospace;

  --fs-2xs: 0.78rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --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(2rem, 3.5vw, 3rem);
  --fs-3xl: clamp(2.5rem, 1.8rem + 3.8vw, 5rem);
  --fs-hero: clamp(2.4rem, 4.6vw, 4rem);

  --tracking-wide: 0.13em;
  --tracking-mid: 0.08em;
  --tracking-tight: -0.025em;

  /* ---- Ritmo ---- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: clamp(40px, 7vw, 80px);
  --space-7: clamp(48px, 8vw, 96px);

  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 12px;

  --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, 122, 61, 0.55);
  --glow-signal: 0 0 22px -6px rgba(143, 227, 168, 0.5);

  /* ---- Tempo ---- */
  --dur-1: 150ms;
  --dur-2: 150ms;
  --dur-3: 460ms;
  --dur-4: 900ms;
  --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: #140A08;
  --strata-2: #1C0F0A;
  --strata-3: #3A1E12;
  --horizon: #FF7A3D;
  --horizon-deep: #E2612F;

  --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: #140A08;
  --hero-overlay: rgba(20, 10, 8, 0.45);
  --hero-glow: rgba(255, 122, 61, 0.16);
  --hero-led: #FF7A3D;
  --hero-led-dim: rgba(255, 122, 61, 0.28);
}

@supports (height: 100svh) {
  :root {
    --hero-viewport-h: calc(100svh - var(--nav-h));
    --hero-scroll-run: 170svh;
  }
}
/* 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; }
  }
}