/* ==========================================================================
   COSMORA · Design Tokens
   --------------------------------------------------------------------------
   Unica fonte di verità per colori, gradienti, spaziature, bordi, ombre,
   animazioni, tipografia e layout. Modifica qui, non nei componenti.
   Guida: design-system/TOKENS.md
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---------- Colori · Base notturna ---------- */
  --night-950: #03050c; /* nero profondo */
  --night-900: #060a18; /* blu notte */
  --night-800: #0a1230;
  --night-700: #111a3d;
  --graphite-800: #1a2033; /* antracite */
  --graphite-700: #252c42;
  --graphite-600: #38405a;

  /* ---------- Colori · Aurora ---------- */
  --aurora-emerald: #34d399; /* verde smeraldo */
  --aurora-teal: #2dd4bf; /* teal */
  --aurora-sky: #38bdf8; /* azzurro */
  --aurora-blue: #4f7cff; /* blu elettrico */
  --aurora-violet: #9b7bff; /* viola */
  --aurora-magenta: #e062f0; /* magenta */
  --aurora-rose: #fb7a8c; /* rosso tenue */
  --aurora-peach: #ffb98f; /* pesca */

  /* ---------- Colori · Testo ---------- */
  --text-strong: #f5f8ff; /* titoli */
  --text: #dce3f7; /* corpo */
  --text-muted: #b0bad6; /* secondario (10:1 su --night-900) */
  --text-faint: #8f9abb; /* solo placeholder / decorazioni */
  --text-on-aurora: #04101a; /* testo scuro su gradienti chiari (bottoni) */
  --text-error: #ffb3bd;

  /* ---------- Colori · Superfici e bordi ---------- */
  --surface-glass: color-mix(in srgb, #ffffff 6%, transparent);
  --surface-glass-hover: color-mix(in srgb, #ffffff 10%, transparent);
  --surface-field: color-mix(in srgb, var(--night-950) 62%, transparent);
  --surface-overlay: color-mix(in srgb, var(--night-950) 72%, transparent);
  --border-soft: color-mix(in srgb, #ffffff 14%, transparent);
  --border-strong: color-mix(in srgb, #ffffff 30%, transparent);
  --focus-ring: #9fe0ff;

  /* ---------- Gradienti ---------- */
  --gradient-aurora: linear-gradient(
    100deg,
    var(--aurora-emerald),
    var(--aurora-teal),
    var(--aurora-sky),
    var(--aurora-blue),
    var(--aurora-violet),
    var(--aurora-magenta),
    var(--aurora-rose),
    var(--aurora-peach)
  );
  --gradient-text: linear-gradient(
    95deg,
    #86f2c8 0%,
    #72dcff 34%,
    #bba8ff 66%,
    #ff9fd8 100%
  );
  --gradient-button: linear-gradient(
    100deg,
    var(--aurora-emerald),
    var(--aurora-teal),
    var(--aurora-sky),
    var(--aurora-violet)
  );
  --gradient-border: linear-gradient(
    140deg,
    rgb(255 255 255 / 0.3),
    rgb(255 255 255 / 0.05) 42%,
    var(--card-accent, var(--aurora-sky)) 130%
  );
  --gradient-night: linear-gradient(
    180deg,
    var(--night-800) 0%,
    var(--night-900) 45%,
    var(--night-950) 100%
  );

  /* ---------- Spaziature (scala 4pt, in rem) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem); /* respiro verticale sezioni */

  /* ---------- Bordi ---------- */
  --border-width: 1px;
  --radius-xs: 0.375rem;
  --radius-sm: 0.625rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;

  /* ---------- Ombre e glow ---------- */
  --shadow-sm: 0 2px 8px rgb(0 0 0 / 0.28);
  --shadow-md: 0 14px 36px -10px rgb(0 0 0 / 0.55);
  --shadow-lg: 0 32px 80px -24px rgb(0 0 0 / 0.65);
  --glow-emerald: 0 0 36px -6px color-mix(in srgb, var(--aurora-emerald) 65%, transparent);
  --glow-sky: 0 0 36px -6px color-mix(in srgb, var(--aurora-sky) 65%, transparent);
  --glow-violet: 0 0 36px -6px color-mix(in srgb, var(--aurora-violet) 65%, transparent);
  --glow-magenta: 0 0 36px -6px color-mix(in srgb, var(--aurora-magenta) 65%, transparent);

  /* ---------- Animazioni ---------- */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.18s;
  --dur-base: 0.35s;
  --dur-slow: 0.7s;
  --dur-reveal: 0.9s;

  /* ---------- Tipografia ---------- */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(2.15rem, 1.2rem + 5.6vw, 4.9rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.45vw, 1.3rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.65;
  --tracking-display: -0.015em;
  --tracking-eyebrow: 0.16em;

  /* ---------- Layout ---------- */
  --container-max: 72rem;
  --container-narrow: 46rem;
  --container-wide: 84rem;
  --gutter: clamp(1.25rem, 0.5rem + 3.5vw, 2.5rem);
  --nav-h: 4.5rem;

  /* ---------- Breakpoint (solo documentazione) ----------
     Le custom property NON funzionano dentro @media: usa questi valori
     direttamente nelle media query.
       sm  30em  (480px)   md  48em  (768px)
       lg  64em (1024px)   xl  80em (1280px)                           */
  --bp-sm: 30em;
  --bp-md: 48em;
  --bp-lg: 64em;
  --bp-xl: 80em;

  /* ---------- Livelli (z-index) ---------- */
  --z-aurora: -1;
  --z-nav: 50;
  --z-skip: 100;
}