/* ==========================================================================
   MP Design System v2 · Tokens
   Primitive (scale grezze) -> Semantic (ruoli) -> Component (in components.css)
   Dark-first: il brand vive sul navy. Light theme via [data-theme="light"].
   ========================================================================== */

:root {
  /* ---------- Primitive: Navy (evoluzione di --mp-bg-*) ---------- */
  --navy-1000: #03040f;
  --navy-950: #05071a;
  --navy-900: #070b22; /* ex --mp-bg-0 */
  --navy-850: #0a0f2e;
  --navy-800: #0c1136; /* ex --mp-bg-1 */
  --navy-700: #111848; /* ex --mp-bg-2 */
  --navy-600: #1a215c; /* ex --mp-bg-3 */
  --navy-500: #2a3278;
  --navy-400: #4a5396;
  --navy-300: #80839f;
  --navy-200: #b7b9cd;
  --navy-100: #dfe0ec;
  --navy-50: #f3f4fa;

  /* ---------- Primitive: Signal Yellow (brand) ---------- */
  --yellow-50: #fffaeb;
  --yellow-100: #fff3cc;
  --yellow-200: #ffe68f;
  --yellow-300: #fdd255;
  --yellow-400: #f8c000; /* brand */
  --yellow-500: #dca800;
  --yellow-600: #a88000;
  --yellow-700: #6e5400;

  /* ---------- Primitive: Cyan (teal evoluto, leggibile su dark) ---------- */
  --cyan-200: #a6ecff;
  --cyan-300: #62d6f7;
  --cyan-400: #22b5e2;
  --cyan-500: #007ea7; /* brand teal */
  --cyan-600: #006b8e;
  --cyan-700: #024a63;

  /* ---------- Primitive: stati ---------- */
  --green-400: #4ade9a;
  --orange-400: #ffa94d;
  --red-400: #ff6b6b;

  /* ---------- Semantic: superfici ---------- */
  --bg: var(--navy-950);
  --bg-raised: var(--navy-900);
  --surface-1: color-mix(in oklab, var(--navy-800) 70%, transparent);
  --surface-2: color-mix(in oklab, var(--navy-700) 75%, transparent);
  --surface-3: color-mix(in oklab, var(--navy-600) 80%, transparent);
  --surface-glass: rgb(12 17 54 / 0.55);
  --surface-inverse: var(--navy-50);

  /* ---------- Semantic: testo ---------- */
  --fg: #eef0f8;
  --fg-soft: var(--navy-200);
  --fg-mute: var(--navy-300);
  --fg-inverse: var(--navy-950);
  --fg-on-accent: var(--navy-950);

  /* ---------- Semantic: accenti ---------- */
  --accent: var(--yellow-400);
  --accent-hover: var(--yellow-300);
  --accent-soft: rgb(248 192 0 / 0.12);
  --accent-glow: rgb(248 192 0 / 0.35);
  --accent-2: var(--cyan-400);
  --accent-2-soft: rgb(34 181 226 / 0.12);
  --accent-2-glow: rgb(0 126 167 / 0.45);
  --success: var(--green-400);
  --warning: var(--orange-400);
  --danger: var(--red-400);

  /* ---------- Semantic: linee ---------- */
  --line: rgb(255 255 255 / 0.08);
  --line-strong: rgb(255 255 255 / 0.16);
  --line-accent: rgb(248 192 0 / 0.4);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* ---------- Gradienti firma ---------- */
  --grad-signal: linear-gradient(100deg, var(--yellow-300) 0%, var(--yellow-400) 40%, var(--cyan-400) 100%);
  --grad-text: linear-gradient(90deg, #fff 0%, var(--yellow-200) 45%, var(--cyan-300) 100%);
  --grad-border: linear-gradient(135deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.02) 40%, rgb(34 181 226 / 0.3));
  --grad-aurora:
    radial-gradient(60% 50% at 10% 0%, rgb(248 192 0 / 0.16), transparent 70%),
    radial-gradient(55% 60% at 100% 20%, rgb(0 126 167 / 0.38), transparent 70%),
    radial-gradient(50% 45% at 50% 110%, rgb(34 181 226 / 0.16), transparent 70%);

  /* ---------- Tipografia ---------- */
  --font-display: "Archivo", "Geist", system-ui, sans-serif; /* variabile: wght 100-900, wdth 62-125 */
  --font-sans: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scala fluida 360px -> 1440px */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --text-lg: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --text-2xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  --text-3xl: clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
  --text-4xl: clamp(2.75rem, 1.7rem + 4.6vw, 5.75rem);
  --text-display: clamp(3.25rem, 1.5rem + 7.8vw, 9rem);
  --text-giant: clamp(3.5rem, 0.5rem + 12vw, 14rem);
  --text-mega: clamp(6rem, 26vw, 30rem);
  --leading-giant: 0.84;
  --tracking-giant: -0.03em;

  --leading-tight: 0.95;
  --leading-snug: 1.15;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-display: -0.045em;
  --tracking-tight: -0.025em;
  --tracking-normal: -0.005em;
  --tracking-caps: 0.14em;

  /* ---------- Spazi (base 4px) ---------- */
  --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;
  --space-10: 8rem;
  --section-y: clamp(5rem, 3rem + 8vw, 10rem);

  /* ---------- Layout ---------- */
  --container: 1280px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --nav-h: 72px;

  /* ---------- Raggi ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---------- Elevazione (glow, non ombre grigie) ---------- */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.04);
  --shadow-md: 0 8px 24px -8px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.06);
  --shadow-lg: 0 30px 60px -20px rgb(0 0 0 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.08);
  --glow-accent: 0 0 0 1px rgb(248 192 0 / 0.3), 0 10px 40px -10px var(--accent-glow);
  --glow-cyan: 0 0 0 1px rgb(34 181 226 / 0.3), 0 10px 40px -10px var(--accent-2-glow);

  /* ---------- Blur ---------- */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 32px;

  /* ---------- Motion ---------- */
  --dur-instant: 90ms;
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 560ms;
  --dur-slower: 900ms;
  --dur-epic: 1400ms;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
  --ease-bounce-soft: linear(0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765, 1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1, 0.988, 0.984, 0.988, 1);

  --stagger: 70ms;
  --reveal-distance: 28px;

  /* ---------- Z-index ---------- */
  --z-base: 1;
  --z-sticky: 50;
  --z-nav: 100;
  --z-overlay: 500;
  --z-cursor: 900;
  --z-toast: 1000;

  color-scheme: dark;
}

/* ---------- Light theme (pagine legali, blog lungo, stampa) ---------- */
[data-theme="light"] {
  --bg: #f7f7fb;
  --bg-raised: #ffffff;
  --surface-1: #ffffff;
  --surface-2: var(--navy-50);
  --surface-3: var(--navy-100);
  --surface-glass: rgb(255 255 255 / 0.7);
  --surface-inverse: var(--navy-900);

  --fg: var(--navy-900);
  --fg-soft: #3a3f66;
  --fg-mute: #62668a;
  --fg-inverse: #fff;

  --accent: var(--yellow-400);
  --accent-hover: var(--yellow-500);
  --accent-2: var(--cyan-500);
  --accent-soft: rgb(248 192 0 / 0.18);

  --line: rgb(7 11 34 / 0.09);
  --line-strong: rgb(7 11 34 / 0.18);
  --grad-text: linear-gradient(90deg, var(--navy-900) 0%, var(--cyan-600) 100%);
  --grad-border: linear-gradient(135deg, rgb(7 11 34 / 0.14), rgb(7 11 34 / 0.03));
  --grad-aurora:
    radial-gradient(60% 50% at 10% 0%, rgb(248 192 0 / 0.18), transparent 70%),
    radial-gradient(55% 60% at 100% 20%, rgb(0 126 167 / 0.14), transparent 70%);
  --shadow-md: 0 10px 30px -12px rgb(7 11 34 / 0.18);
  --shadow-lg: 0 30px 60px -24px rgb(7 11 34 / 0.25);

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
    --dur-slower: 0.01ms;
    --dur-epic: 0.01ms;
    --stagger: 0ms;
    --reveal-distance: 0px;
  }
}