/* =============================================================================
   Kivo — Tokens & variables de design
   DA "intelligence calme" : bleu-nuit + orbe cyan, accent métier variable.
   ============================================================================= */
:root {
  /* Fonds profonds */
  --bg-900: #090d1a;
  --bg-800: #0b1020;
  --bg-700: #11162b;
  --bg-650: #151b34;
  --bg-600: #1a2140;
  --surface: rgba(255, 255, 255, .04);
  --surface-2: rgba(255, 255, 255, .07);
  --border: rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .18);

  /* Zones claires (démo/produit) */
  --light-50: #f6f8ff;
  --light-100: #eef1fb;
  --light-200: #dfe4f3;
  --ink-900: #0b1020;
  --ink-700: #2a3354;
  --ink-500: #5b6488;

  /* Texte sur sombre */
  --text: #f3f6ff;
  --text-soft: #c2cae6;
  --text-dim: #8893b8;

  /* Marque */
  --brand: #3b82f6;
  --brand-2: #22d3ee;
  --brand-grad: linear-gradient(135deg, #3b82f6 0%, #22d3ee 100%);
  --violet: #8b5cf6;

  /* Accent métier (réécrit par JS via --accent / --accent-soft) */
  --accent: #22d3ee;
  --accent-soft: rgba(34, 211, 238, .16);

  /* Sémantiques */
  --success: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;

  /* Typo */
  --font-title: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Échelle fluide */
  --step--1: clamp(.82rem, .78rem + .2vw, .9rem);
  --step-0: clamp(1rem, .95rem + .25vw, 1.1rem);
  --step-1: clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3rem);
  --step-4: clamp(2.6rem, 2rem + 3vw, 4.4rem);
  --step-5: clamp(3.2rem, 2.4rem + 4vw, 5.5rem);

  /* Rayons / ombres */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;
  --shadow-sm: 0 4px 18px rgba(0, 0, 0, .25);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, .35);
  --shadow-glow: 0 0 50px -8px var(--accent);

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 72px;

  /* Easing / durées */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .18s;
  --t: .32s;
  --t-slow: .55s;
}