/* ════════════════════════════════════════════════════════
   TOKENS.CSS — Design tokens, variables, root settings
   ════════════════════════════════════════════════════════ */

:root {
  /* ── Fonts ── */
  --font-display: 'Syne', 'SF Pro Display', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'SF Pro Text',   -apple-system, 'Segoe UI', system-ui, sans-serif;

  /* ── Background scale ── */
  --bg:   #0e0d16;
  --bg2:  #13111f;
  --bg3:  #1c1929;
  --bg4:  #252238;
  --bg5:  #2e2b45;

  /* ── Border / line colors ── */
  --line1: rgba(255,255,255,.06);
  --line2: rgba(255,255,255,.11);
  --line3: rgba(255,255,255,.20);

  /* ── Text colors ── */
  --text-primary:   #f4f1ff;
  --text-secondary: #c8c4e0;
  --text-muted:     #8e8aaa;
  --text-dim:       #514d6a;

  /* ── Accent (adaptive — changes per service) ── */
  --accent-h:   232;
  --accent-s:   85%;
  --accent-l:   66%;
  --accent:     hsl(232, 85%, 66%);
  --accent-dim: hsla(232, 85%, 66%, .13);
  --accent-glow:hsla(232, 85%, 66%, .28);

  /* ── Static service palette vars (used by JS) ── */
  --c-voz:       232 85% 66%;
  --c-chat:      158 72% 48%;
  --c-flow:       35 95% 58%;
  --c-data:      268 78% 68%;
  --c-analytics: 332 88% 65%;
  --c-consult:   192 88% 52%;

  /* ── Spacing ── */
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6.5rem;

  /* ── Radius ── */
  --radius:    12px;
  --radius-lg: 20px;
  --radius-xl: 26px;

  /* ── Shadows ── */
  --shadow-card: 0 2px 20px rgba(0,0,0,.25);
  --shadow-lift: 0 16px 48px rgba(0,0,0,.35);
  --shadow-deep: 0 28px 70px rgba(0,0,0,.55);

  /* ── Transitions ── */
  --ease: cubic-bezier(.25,.46,.45,.94);
  --t-fast:   .18s var(--ease);
  --t-normal: .28s var(--ease);
  --t-slow:   .45s var(--ease);
}