/* ============================================================
   CONSULIX — DESIGN TOKENS (DARK SLATE)
   Allineato a crm.sabatopescatore.it: slate-950 base,
   sky+indigo accent gradient, emerald success, glass surfaces.
   ============================================================ */

:root {
  /* ── Slate scale (Tailwind-compatibili) ──────────────── */
  --c-slate-950: #020617;
  --c-slate-900: #0f172a;
  --c-slate-850: #131d33;
  --c-slate-800: #1e293b;
  --c-slate-700: #334155;
  --c-slate-600: #475569;
  --c-slate-500: #64748b;
  --c-slate-400: #94a3b8;
  --c-slate-300: #cbd5e1;
  --c-slate-200: #e2e8f0;
  --c-slate-100: #f1f5f9;
  --c-slate-50:  #f8fafc;

  /* ── Accent (sky + indigo gradient) ──────────────────── */
  --c-sky-300:    #7dd3fc;
  --c-sky-400:    #38bdf8;
  --c-sky-500:    #0ea5e9;
  --c-indigo-300: #a5b4fc;
  --c-indigo-400: #818cf8;
  --c-indigo-500: #6366f1;

  /* ── States ──────────────────────────────────────────── */
  --c-emerald-400: #34d399;
  --c-emerald-500: #10b981;
  --c-amber-400:   #fbbf24;
  --c-rose-500:    #f43f5e;

  --c-white: #ffffff;
  --c-black: #000000;

  /* ── Semantici ───────────────────────────────────────── */
  --bg-page:     var(--c-slate-950);
  --bg-surface:  color-mix(in srgb, var(--c-slate-900) 70%, transparent);
  --bg-elevated: color-mix(in srgb, var(--c-slate-850) 80%, transparent);
  --bg-soft:     color-mix(in srgb, var(--c-slate-900) 50%, transparent);
  --bg-muted:    color-mix(in srgb, var(--c-slate-800) 50%, transparent);
  --bg-inverse:  var(--c-slate-50);

  --fg-primary:   var(--c-slate-50);
  --fg-secondary: var(--c-slate-300);
  --fg-muted:     var(--c-slate-400);
  --fg-faint:     var(--c-slate-500);
  --fg-on-accent: var(--c-slate-950);

  --accent:        var(--c-sky-400);
  --accent-2:      var(--c-indigo-400);
  --accent-soft:   color-mix(in srgb, var(--c-sky-400) 22%, transparent);
  --accent-hover:  var(--c-sky-300);
  --accent-grad:   linear-gradient(120deg, var(--c-sky-400) 0%, var(--c-indigo-400) 50%, var(--c-sky-500) 100%);

  --border-soft:   color-mix(in srgb, var(--c-slate-700) 60%, transparent);
  --border-medium: color-mix(in srgb, var(--c-slate-600) 70%, transparent);
  --border-strong: color-mix(in srgb, var(--c-slate-500) 80%, transparent);
  --border-glow:   color-mix(in srgb, var(--c-sky-400) 35%, transparent);

  --success: var(--c-emerald-500);
  --warning: var(--c-amber-400);
  --danger:  var(--c-rose-500);

  /* ── Typography ──────────────────────────────────────── */
  --font-display: "Fraunces", "Cormorant Garamond", "Source Serif Pro", Georgia, serif;
  --font-sans:    "Geist", "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.1875rem;
  --fs-xl:   clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
  --fs-2xl:  clamp(1.5rem, 1vw + 1.25rem, 1.875rem);
  --fs-3xl:  clamp(1.875rem, 1.6vw + 1.4rem, 2.5rem);
  --fs-4xl:  clamp(2.25rem, 2vw + 1.6rem, 3.25rem);
  --fs-5xl:  clamp(2.75rem, 3vw + 1.8rem, 4.5rem);
  --fs-6xl:  clamp(3.25rem, 4.5vw + 2rem, 6.5rem);

  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.025em;
  --tracking-snug:    -0.012em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Spacing ─────────────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;
  --sp-11: 10rem;
  --sp-12: 14rem;

  /* ── Layout ──────────────────────────────────────────── */
  --container-max:    1320px;
  --container-narrow: 920px;
  --container-text:   65ch;
  --gutter-x:         clamp(1rem, 3vw, 2.25rem);
  --section-y:        clamp(4rem, 8vw, 8rem);

  /* ── Radii ───────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ── Shadows (dark, blue-tinted) ─────────────────────── */
  --shadow-xs: 0 1px 2px rgba(2, 6, 23, 0.4);
  --shadow-sm: 0 6px 18px -6px rgba(2, 6, 23, 0.55);
  --shadow-md: 0 14px 36px -12px rgba(2, 6, 23, 0.7);
  --shadow-lg: 0 28px 60px -20px rgba(2, 6, 23, 0.85);
  --shadow-xl: 0 48px 90px -32px rgba(2, 6, 23, 0.95);

  --shadow-glow: 0 12px 40px -10px color-mix(in srgb, var(--c-sky-400) 55%, transparent);
  --shadow-glow-soft: 0 8px 28px -10px color-mix(in srgb, var(--c-indigo-400) 35%, transparent);

  --shadow-inner-edge:  inset 0 1px 0 rgba(148, 163, 184, 0.18);
  --shadow-inner-glass: inset 0 1px 0 rgba(148, 163, 184, 0.18),
                        inset 0 0 0 1px rgba(148, 163, 184, 0.06);

  /* ── Motion ──────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   620ms;
  --dur-slower: 1100ms;

  /* ── Z-index ─────────────────────────────────────────── */
  --z-base:    1;
  --z-elev:    10;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;

  --header-h: 76px;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-slower: 0ms;
  }
}

::selection { background: color-mix(in srgb, var(--c-sky-400) 35%, transparent); color: var(--c-slate-50); }