/* ============================================================
   ETERNAVA — Design tokens del sito
   Derivati dal sistema visivo del prodotto (app + studio).
   NON aggiungere colori fuori da questa palette.
   ============================================================ */

:root {
  /* --- Palette base (dal prodotto) --- */
  --bg-void: #0B0B1A;
  --bg-deep: #101024;
  --bg-raise: #171732;

  --ink: #EDEDF7;            /* testo primario */
  --ink-dim: #A8A8C3;        /* testo secondario */
  --ink-faint: #6E6E8F;      /* didascalie, meta */

  --violet: #8B5CF6;
  --violet-soft: #A78BFA;
  --cyan: #22D3EE;
  --amber: #FBBF24;
  --amber-soft: #FCD34D;
  --teal: #2DD4BF;

  /* --- Tinte d'ambiente per i temi di sezione --- */
  --nebula-violet: rgba(139, 92, 246, 0.14);
  --nebula-cyan: rgba(34, 211, 238, 0.10);
  --nebula-amber: rgba(251, 191, 36, 0.10);
  --nebula-teal: rgba(45, 212, 191, 0.10);

  /* --- Vetro (glassmorphism del prodotto) --- */
  --glass-bg: rgba(23, 23, 50, 0.55);
  --glass-brd: rgba(168, 168, 195, 0.16);
  --glass-blur: 14px;

  /* --- Tipografia — allineata allo studio: Syne + Space Grotesk --- */
  --font-display: "Syne", "Avenir Next", "Futura", sans-serif;
  --font-body: "Space Grotesk", -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-hero: clamp(2.6rem, 7vw, 5rem);
  --fs-h2: clamp(1.9rem, 4.4vw, 3.1rem);
  --fs-h3: clamp(1.15rem, 2vw, 1.4rem);
  --fs-body: clamp(1rem, 1.15vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.08;
  --lh-head: 1.15;
  --lh-body: 1.65;

  /* --- Spazio --- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6.5rem;
  --sp-section: clamp(5rem, 12vh, 9rem);

  /* --- Geometria --- */
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --container: 1120px;
  --container-narrow: 760px;

  /* --- Ombre / bagliori --- */
  --glow-violet: 0 0 60px rgba(139, 92, 246, 0.35);
  --glow-cyan: 0 0 50px rgba(34, 211, 238, 0.25);
  --glow-amber: 0 0 60px rgba(251, 191, 36, 0.22);
  --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.45);

  /* --- Livelli --- */
  --z-nav: 100;
  --z-skip: 200;

  /* --- Accento corrente (i temi lo ridefiniscono) --- */
  --accent: var(--violet);
  --accent-soft: var(--violet-soft);
  --nebula: var(--nebula-violet);
  --glow: var(--glow-violet);
}

/* ------------------------------------------------------------
   Temi di sezione — la pagina cambia clima come l'app cambia
   con l'umore. Applicare data-theme sul <section>.
   ------------------------------------------------------------ */

[data-theme="cosmo"] {
  --accent: var(--violet);
  --accent-soft: var(--violet-soft);
  --nebula: var(--nebula-violet);
  --glow: var(--glow-violet);
}

[data-theme="warm"] {
  --accent: var(--amber);
  --accent-soft: var(--amber-soft);
  --nebula: var(--nebula-amber);
  --glow: var(--glow-amber);
}

[data-theme="teal"] {
  --accent: var(--teal);
  --accent-soft: #5EEAD4;
  --nebula: var(--nebula-teal);
  --glow: var(--glow-cyan);
}