/* ==========================================================================
   Luminia Design Tokens — wave2a
   Palette Luminia: blu + viola + cyan (identità dal sito attuale in produzione)
   Due gradienti signature:
     - --grad-cta:  blu → viola   (CTA button, primary action)
     - --grad-text: blu2 → cyan   (text accent, logo, KPI number)
   Theme dark (default) + theme light (via [data-theme="light"])
   NIENTE palette per-verticale — l'identità Luminia è unica su ogni pagina
   ========================================================================== */

:root {
  /* ---------- SURFACE — DARK (default, come diagnosi.agencyluminia.com) ---------- */
  --bg:            #04080f;
  --surface:       #080e1a;
  --s2:            #0d1526;
  --surface-hi:    #12192b;

  --text:          #f1f5f9;
  --text-strong:   #ffffff;
  --muted:         #64748b;
  --muted2:        #94a3b8;

  --border:        rgba(255,255,255,.07);
  --border2:       rgba(255,255,255,.12);
  --border-hi:     rgba(255,255,255,.20);

  /* overlay usato da portale sidebar, card blur, ecc */
  --panel-overlay: rgba(4,8,15,.6);
  --nav-bg:        rgba(4,8,15,.85);

  /* ---------- FUNCTIONAL ---------- */
  --red:           #ef4444;
  --red-soft:      #f97316;
  --green:         #22c55e;
  --green-soft:    rgba(34,197,94,.10);
  --amber-warn:    #f59e0b;

  /* ---------- BRAND — Luminia (identità unica, uguale per ogni verticale) ---------- */
  --acc:           #2563eb;   /* blue-600 · brand core */
  --acc2:          #3b82f6;   /* blue-500 · text accent */
  --acc3:          #06b6d4;   /* cyan-500 · text accent hi */
  --acc-purple:    #7c3aed;   /* violet-600 · companion */
  --acc-purple2:   #a78bfa;   /* violet-400 · companion hi */

  --acc-soft:      rgba(37,99,235,.10);
  --acc-border:    rgba(37,99,235,.28);
  --acc-glow:      rgba(37,99,235,.40);
  --acc-glow-purple: rgba(124,58,237,.35);

  /* GRADIENTI SIGNATURE — usati ovunque per identità Luminia */
  --grad-cta:      linear-gradient(135deg, var(--acc) 0%, var(--acc-purple) 100%);
  --grad-cta-hi:   linear-gradient(135deg, #3b82f6 0%, #a78bfa 100%);
  --grad-text:     linear-gradient(135deg, var(--acc2) 0%, var(--acc3) 100%);
  --grad-text-alt: linear-gradient(135deg, var(--acc-purple) 0%, var(--acc-purple2) 100%);

  /* alias short-name coerenti con index.html attuale */
  --blue:   var(--acc);
  --blue2:  var(--acc2);
  --cyan:   var(--acc3);
  --purple: var(--acc-purple);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* scala modulare 1.250 (major third) */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.25rem;   /* 20 */
  --fs-xl:   1.5rem;    /* 24 */
  --fs-2xl:  1.875rem;  /* 30 */
  --fs-3xl:  2.25rem;   /* 36 */
  --fs-4xl:  3rem;      /* 48 */
  --fs-5xl:  clamp(2.8rem, 5vw, 4.5rem);
  --fs-6xl:  clamp(3.5rem, 6.5vw, 5.5rem);

  /* NUMBER DISPLAY — scala dedicata per KPI (ispirazione infrastrutture.ai) */
  --num-sm:  2rem;
  --num-md:  clamp(2.5rem, 4vw, 3.5rem);
  --num-lg:  clamp(3.5rem, 6vw, 4.5rem);
  --num-xl:  clamp(4.5rem, 8vw, 6.5rem);
  --num-2xl: clamp(5.5rem, 11vw, 8.5rem);

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --ls-tight:   -0.03em;
  --ls-normal:  0;
  --ls-wide:    0.05em;
  --ls-widest:  0.15em;

  --fw-light:    300;
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;
  --fw-black:    900;

  /* ---------- SPACING (4px base) ---------- */
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ---------- RADII ---------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-pill: 100px;
  --r-full: 9999px;

  /* ---------- SHADOWS (dark theme values) ---------- */
  --shadow-sm:   0 2px 8px rgba(0,0,0,.20);
  --shadow-md:   0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:   0 16px 48px rgba(0,0,0,.50);
  --shadow-xl:   0 40px 80px rgba(0,0,0,.70);
  --shadow-cta:  0 8px 40px var(--acc-glow-purple);
  --shadow-cta-hover: 0 12px 60px rgba(124,58,237,.55);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.08);

  /* ---------- TRANSITIONS ---------- */
  --ease:        cubic-bezier(.22, 1, .36, 1);
  --ease-in:     cubic-bezier(.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, .2, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;
  --dur-reveal:  800ms;

  /* ---------- LAYOUT ---------- */
  --container:       1100px;
  --container-wide:  1280px;
  --container-prose: 720px;
  --page-pad:        6vw;
  --nav-h:           64px;

  /* ---------- Z-INDEX ---------- */
  --z-nav:      500;
  --z-modal:    900;
  --z-toast:    1000;
}

/* ==========================================================================
   THEME LIGHT — override [data-theme="light"] su <body>
   Inverte superficie e testo, mantiene identità brand (gradienti blu/viola)
   ========================================================================== */

[data-theme="light"] {
  --bg:            #f8fafc;   /* slate-50 */
  --surface:       #ffffff;
  --s2:            #f1f5f9;   /* slate-100 */
  --surface-hi:    #e2e8f0;   /* slate-200 */

  --text:          #0f172a;   /* slate-900 */
  --text-strong:   #020617;   /* slate-950 */
  --muted:         #64748b;   /* slate-500 */
  --muted2:        #475569;   /* slate-600 */

  --border:        rgba(15,23,42,.08);
  --border2:       rgba(15,23,42,.12);
  --border-hi:     rgba(15,23,42,.20);

  --panel-overlay: rgba(255,255,255,.7);
  --nav-bg:        rgba(255,255,255,.85);

  --acc-soft:      rgba(37,99,235,.06);
  --acc-border:    rgba(37,99,235,.20);
  --acc-glow:      rgba(37,99,235,.25);
  --acc-glow-purple: rgba(124,58,237,.20);

  /* shadows piu' leggere su light */
  --shadow-sm:   0 1px 3px rgba(15,23,42,.08);
  --shadow-md:   0 4px 16px rgba(15,23,42,.10);
  --shadow-lg:   0 12px 32px rgba(15,23,42,.12);
  --shadow-xl:   0 24px 60px rgba(15,23,42,.15);
  --shadow-cta:  0 6px 24px var(--acc-glow-purple);
  --shadow-cta-hover: 0 10px 40px rgba(124,58,237,.35);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.6);
}

/* ==========================================================================
   BASE
   ========================================================================== */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.h-display {
  font-size: var(--fs-6xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}

.h1, h1.h1 {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}

.h2, h2.h2 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extra);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.h3, h3.h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--sp-3);
}

.lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--muted2);
  max-width: 62ch;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* helper: applica il gradient text signature */
.text-gradient      { background: var(--grad-text);      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-gradient-alt  { background: var(--grad-text-alt);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }