/* =========================================================================
   TOKENS — Design system "Terminal Horizon"
   3 tiers : primitives -> semantic -> composants
   ========================================================================= */

:root {
  /* ---------- Primitives : palette brute ---------- */
  --p-cyan-100: #cffafe;
  --p-cyan-200: #a5f3fc;
  --p-cyan-300: #67e8f9;
  --p-cyan-400: #22d3ee;
  --p-cyan-500: #06b6d4;
  --p-cyan-600: #0891b2;
  --p-cyan-700: #0e7490;
  --p-cyan-900: #164e63;

  --p-emerald-300: #6ee7b7;
  --p-emerald-400: #34d399;
  --p-emerald-500: #10b981;
  --p-emerald-600: #054632;
  --p-emerald-900: #064e3b;

  --p-violet-300: #c4b5fd;
  --p-violet-400: #a78bfa;
  --p-violet-500: #8b5cf6;
  --p-violet-600: #7c3aed;
  --p-violet-900: #4c1d95;

  --p-amber-400: #fbbf24;
  --p-red-400: #f87171;

  --p-slate-050: #f8fafc;
  --p-slate-100: #f1f5f9;
  --p-slate-200: #e2e8f0;
  --p-slate-300: #cbd5e1;
  --p-slate-400: #94a3b8;
  --p-slate-500: #64748b;
  --p-slate-600: #475569;
  --p-slate-700: #334155;
  --p-slate-800: #1e293b;
  --p-slate-850: #172033;
  --p-slate-900: #0f172a;
  --p-slate-950: #090d16;

  /* ---------- Semantic : surfaces (thème sombre par défaut) ---------- */
  --canvas: #060910;
  --canvas-deep: #04060c;
  --surface-1: rgba(15, 23, 42, 0.58);
  --surface-2: rgba(30, 41, 59, 0.72);
  --surface-3: rgba(15, 23, 42, 0.9);
  --surface-solid: #0b1120;
  --surface-inset: rgba(3, 6, 14, 0.7);
  --surface-inset-2: rgba(8, 13, 26, 0.85);

  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);
  --hairline-soft: rgba(255, 255, 255, 0.045);

  --text-hi: #f0f2f3cf;
  --text-mid: #b9b5b8ca;
  --text-low: #6b7c93;
  --text-faint: #465568;

  --accent: var(--p-cyan-400);
  --accent-strong: var(--p-cyan-500);
  --accent-soft: var(--p-cyan-300);
  --accent-deep: var(--p-cyan-900);
  --accent-contrast: #04121a;

  --accent-2: var(--p-emerald-400);
  --accent-2-soft: var(--p-emerald-300);
  --accent-2-deep: var(--p-emerald-900);

  --accent-3: var(--p-violet-400);
  --accent-3-soft: var(--p-violet-300);
  --accent-3-deep: var(--p-violet-900);

  --warn: var(--p-amber-400);
  --danger: var(--p-red-400);
  --code-num: var(--p-amber-400);

  /* ---------- Semantic : surfaces pour chaque accent ---------- */
  --accent-tint: rgba(34, 211, 238, 0.12);
  --accent-tint-2: rgba(16, 185, 129, 0.12);
  --accent-tint-3: rgba(167, 139, 250, 0.12);
  --accent-glow: rgba(6, 182, 212, 0.28);

  /* ---------- Typographie ---------- */
  --font-display: "Geist", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Code", Consolas, monospace;

  --fs-hero: clamp(2.35rem, 1.2rem + 4.4vw, 4.25rem);
  --fs-h2: clamp(1.8rem, 1.15rem + 2.3vw, 2.85rem);
  --fs-h3: clamp(1.18rem, 1.02rem + 0.6vw, 1.5rem);
  --fs-h4: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
  --fs-lead: clamp(1.02rem, 0.97rem + 0.3vw, 1.18rem);
  --fs-body: 0.975rem;
  --fs-sm: 1.0rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.6875rem;
  --fs-code: 0.8rem;

  --lh-tight: 1.06;
  --lh-snug: 1.22;
  --lh-body: 1.75;
  --lh-mono: 1.72;

  --ls-hero: -0.035em;
  --ls-tight: -0.02em;
  --ls-label: 0.14em;

  /* ---------- Espacement (échelle 4px) ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 6rem;

  --gutter: 1.5rem;
  --margin: 4rem;
  --section-gap: clamp(5.5rem, 3.5rem + 7vw, 10rem);
  --max-w: 1280px;
  --max-w-prose: 68ch;

  /* ---------- Rayons (angles serrés, langage "instrument") ---------- */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 18px;
  --r-full: 9999px;

  /* ---------- Élévation ---------- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 12px 28px -16px rgba(0, 0, 0, 0.75);
  --sh-3: 0 24px 56px -20px rgba(0, 0, 0, 0.85);
  --sh-4: 0 40px 90px -32px rgba(0, 0, 0, 0.9);
  --sh-accent: 0 0 0 1px rgba(34, 211, 238, 0.28), 0 12px 40px -14px var(--accent-glow);
  --sh-accent-strong: 0 0 0 1px rgba(34, 211, 238, 0.45), 0 18px 54px -14px rgba(6, 182, 212, 0.45);

  --blur-glass: saturate(150%) blur(14px);
  --blur-heavy: saturate(170%) blur(26px);

  /* ---------- Transitions ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 520ms;

  --z-bg: 0;
  --z-content: 10;
  --z-header: 100;
  --z-cursor: 150;
  --z-overlay: 200;
  --z-modal: 300;
  --z-palette: 320;
  --z-toast: 500;
}

/* =========================================================================
   Thème clair — mêmes tokens, valeurs inversées
   ========================================================================= */
[data-theme="light"] {
  --canvas: #eef2f8;
  --canvas-deep: #e2e8f2;
  --surface-1: rgba(255, 255, 255, 0.72);
  --surface-2: rgba(255, 255, 255, 0.92);
  --surface-3: rgba(255, 255, 255, 0.96);
  --surface-solid: #ffffff;
  --surface-inset: rgba(15, 23, 42, 0.035);
  --surface-inset-2: rgba(15, 23, 42, 0.055);

  --hairline: rgba(15, 23, 42, 0.1);
  --hairline-strong: rgba(15, 23, 42, 0.18);
  --hairline-soft: rgba(15, 23, 42, 0.06);

  --text-hi: #0b1120;
  --text-mid: #3d4c60;
  --text-low: #5b6b81;
  --text-faint: #414b57;

  --accent: var(--p-cyan-600);
  --accent-strong: var(--p-cyan-700);
  --accent-soft: var(--p-cyan-700);
  --accent-deep: rgba(6, 182, 212, 0.16);
  --accent-contrast: #ffffff;

  --accent-2: var(--p-emerald-600);
  --accent-2-soft: var(--p-emerald-600);
  --accent-2-deep: rgba(16, 185, 129, 0.14);

  --accent-3: var(--p-violet-600);
  --accent-3-soft: var(--p-violet-600);
  --accent-3-deep: rgba(139, 92, 246, 0.14);

  --accent-tint: rgba(6, 182, 212, 0.1);
  --accent-tint-2: rgba(16, 185, 129, 0.1);
  --accent-tint-3: rgba(139, 92, 246, 0.1);
  --accent-glow: rgba(6, 182, 212, 0.2);

  --sh-1: 0 1px 2px rgba(15, 23, 42, 0.08);
  --sh-2: 0 12px 28px -18px rgba(15, 23, 42, 0.3);
  --sh-3: 0 24px 56px -24px rgba(15, 23, 42, 0.32);
  --sh-4: 0 40px 90px -40px rgba(15, 23, 42, 0.38);

  --code-num: #b45309;
}