/* ==========================================================================
   SYNAPSE — Design tokens
   Visive.ai theme. Dark-first. Every value a page may reference lives here.
   Layer order: tokens -> base -> layout -> components -> effects -> utilities
   ========================================================================== */

:root {
  /* ---------- Palette primitives ------------------------------------ */
  --ink-1000: #03050A;
  --ink-950: #05070E;
  --ink-900: #080B14;
  --ink-850: #0C111C;
  --ink-800: #111827;
  --ink-750: #172033;
  --ink-700: #1E293D;
  --ink-600: #2A3750;
  --ink-500: #3B4A63;

  --paper-000: #FFFFFF;
  --paper-050: #F7F9FC;
  --paper-100: #EEF2F8;
  --paper-200: #DFE6F0;
  --paper-300: #C6D0DF;

  /* Signal cyan — the live/streaming primary */
  --cyan-100: #D2FFF9;
  --cyan-300: #7BF2E4;
  --cyan-400: #3FE3D0;
  --cyan-500: #14CDBA;
  --cyan-600: #06A896;
  --cyan-700: #0A7F73;

  /* Pulse violet — the reasoning/AI secondary */
  --violet-200: #DDD5FF;
  --violet-300: #BBA9FF;
  --violet-400: #9B84FF;
  --violet-500: #7C5CFF;
  --violet-600: #6340E0;
  --violet-700: #4A2CB0;

  /* Vision amber — the perception/detection accent */
  --amber-300: #FFD9A0;
  --amber-400: #FFBE5C;
  --amber-500: #F5A524;

  /* Status */
  --rose-400: #FF6B8A;
  --rose-500: #ED4C6A;
  --lime-400: #7DE87A;
  --sky-400: #59B6FF;

  /* ---------- Semantic roles (dark theme = default) ---------------- */
  --bg: var(--ink-950);
  --bg-sunken: var(--ink-1000);
  --bg-raised: var(--ink-900);
  --bg-panel: rgba(255 255 255 / 0.035);
  --bg-panel-hover: rgba(255 255 255 / 0.06);
  --bg-inset: rgba(3 5 10 / 0.55);
  --bg-scrim: rgba(3 5 10 / 0.78);

  --border: rgba(255 255 255 / 0.09);
  --border-strong: rgba(255 255 255 / 0.16);
  --border-faint: rgba(255 255 255 / 0.05);

  --text: #EDF2FA;
  --text-muted: #9AA9C0;
  --text-faint: #6B7C96;
  --text-inverse: var(--ink-950);

  --primary: var(--cyan-400);
  --primary-strong: var(--cyan-500);
  --primary-soft: rgba(63 227 208 / 0.12);
  --primary-ring: rgba(63 227 208 / 0.35);
  --on-primary: #04211E;

  --secondary: var(--violet-400);
  --secondary-soft: rgba(155 132 255 / 0.14);
  --accent: var(--amber-400);
  --accent-soft: rgba(255 190 92 / 0.14);
  --danger: var(--rose-400);
  --success: var(--lime-400);
  --info: var(--sky-400);

  --link: var(--cyan-300);
  --focus: var(--cyan-300);

  /* ---------- Gradients & meshes ------------------------------------ */
  --grad-signal: linear-gradient(120deg, var(--cyan-400) 0%, var(--violet-400) 100%);
  --grad-signal-soft: linear-gradient(120deg, rgba(63 227 208 / 0.16), rgba(155 132 255 / 0.16));
  --grad-vision: linear-gradient(120deg, var(--violet-400) 0%, var(--amber-400) 100%);
  --grad-text: linear-gradient(96deg, #FFFFFF 12%, var(--cyan-300) 52%, var(--violet-300) 92%);
  --grad-panel: linear-gradient(160deg, rgba(255 255 255 / 0.07), rgba(255 255 255 / 0.015));
  --grad-fade-b: linear-gradient(180deg, transparent, var(--bg));

  /* ---------- Typography -------------------------------------------- */
  --font-display: "Space Grotesk", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid scale, 1.24 ratio at small / 1.32 at large */
  --fs-micro: clamp(0.688rem, 0.67rem + 0.08vw, 0.75rem);
  --fs-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.813rem);
  --fs-sm: clamp(0.875rem, 0.86rem + 0.1vw, 0.938rem);
  --fs-base: clamp(1rem, 0.97rem + 0.14vw, 1.063rem);
  --fs-md: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --fs-lg: clamp(1.313rem, 1.22rem + 0.42vw, 1.563rem);
  --fs-xl: clamp(1.563rem, 1.4rem + 0.75vw, 2rem);
  --fs-2xl: clamp(1.875rem, 1.6rem + 1.25vw, 2.75rem);
  --fs-3xl: clamp(2.25rem, 1.78rem + 2.1vw, 3.75rem);
  --fs-4xl: clamp(2.75rem, 1.9rem + 3.6vw, 5.25rem);
  --fs-5xl: clamp(2.85rem, 1.55rem + 4.2vw, 5.75rem);

  --lh-tight: 1.02;
  --lh-snug: 1.14;
  --lh-heading: 1.2;
  --lh-body: 1.62;
  --lh-loose: 1.75;

  --tracking-tight: -0.03em;
  --tracking-snug: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.14em;

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

  --measure: 68ch;
  --measure-tight: 54ch;
  --measure-wide: 82ch;

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

  /* Section rhythm — fluid so bands breathe on wide screens */
  --band-sm: clamp(3rem, 5vw, 4.5rem);
  --band: clamp(4.5rem, 8vw, 7.5rem);
  --band-lg: clamp(6rem, 11vw, 10.5rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

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

  /* ---------- Elevation & glow -------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(3 5 10 / 0.4);
  --shadow-md: 0 8px 24px -8px rgba(3 5 10 / 0.55);
  --shadow-lg: 0 28px 60px -24px rgba(3 5 10 / 0.72);
  --shadow-xl: 0 48px 100px -40px rgba(3 5 10 / 0.85);
  --glow-primary: 0 0 0 1px rgba(63 227 208 / 0.28), 0 18px 48px -20px rgba(20 205 186 / 0.55);
  --glow-secondary: 0 0 0 1px rgba(155 132 255 / 0.3), 0 18px 48px -20px rgba(124 92 255 / 0.5);
  --inner-hairline: inset 0 1px 0 rgba(255 255 255 / 0.07);

  /* ---------- Motion ------------------------------------------------- */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
  --dur-5: 800ms;
  --dur-6: 1200ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Layout ------------------------------------------------- */
  --container: 1240px;
  --container-wide: 1440px;
  --container-narrow: 880px;
  --container-prose: 720px;
  --header-h: 72px;
  --z-base: 1;
  --z-sticky: 60;
  --z-header: 80;
  --z-drawer: 90;
  --z-modal: 100;
  --z-toast: 110;

  /* ---------- Backdrop ---------------------------------------------- */
  --blur-sm: blur(6px);
  --blur-md: blur(14px);
  --blur-lg: blur(28px);
  --grain-opacity: 0.035;
}

/* ==========================================================================
   Light theme — same roles, re-pointed. Set data-theme="light" on <html>.
   ========================================================================== */
[data-theme="light"] {
  --bg: var(--paper-050);
  --bg-sunken: var(--paper-100);
  --bg-raised: var(--paper-000);
  --bg-panel: rgba(8 11 20 / 0.025);
  --bg-panel-hover: rgba(8 11 20 / 0.05);
  --bg-inset: rgba(8 11 20 / 0.04);
  --bg-scrim: rgba(247 249 252 / 0.82);

  --border: rgba(8 11 20 / 0.1);
  --border-strong: rgba(8 11 20 / 0.2);
  --border-faint: rgba(8 11 20 / 0.06);

  --text: #0B1220;
  --text-muted: #4C5A72;
  --text-faint: #6E7C93;
  --text-inverse: var(--paper-000);

  --primary: var(--cyan-600);
  --primary-strong: var(--cyan-700);
  --primary-soft: rgba(6 168 150 / 0.1);
  --primary-ring: rgba(6 168 150 / 0.3);
  --on-primary: #FFFFFF;

  --secondary: var(--violet-600);
  --secondary-soft: rgba(99 64 224 / 0.1);
  --accent: var(--amber-500);
  --accent-soft: rgba(245 165 36 / 0.14);
  --danger: var(--rose-500);

  --link: var(--cyan-700);
  --focus: var(--cyan-600);

  --grad-text: linear-gradient(96deg, #0B1220 10%, var(--cyan-700) 55%, var(--violet-700) 95%);
  --grad-panel: linear-gradient(160deg, rgba(255 255 255 / 0.9), rgba(255 255 255 / 0.5));

  --shadow-md: 0 8px 24px -10px rgba(11 18 32 / 0.16);
  --shadow-lg: 0 28px 60px -28px rgba(11 18 32 / 0.22);
  --shadow-xl: 0 48px 100px -44px rgba(11 18 32 / 0.28);
  --inner-hairline: inset 0 1px 0 rgba(255 255 255 / 0.8);
  --grain-opacity: 0.02;
}

/* Inverted island inside a light page (or vice versa) */
[data-surface="dark"] {
  color-scheme: dark;
  --bg: var(--ink-950);
  --bg-raised: var(--ink-900);
  --bg-panel: rgba(255 255 255 / 0.04);
  --border: rgba(255 255 255 / 0.09);
  --text: #EDF2FA;
  --text-muted: #9AA9C0;
  --text-faint: #6B7C96;
  --primary: var(--cyan-400);
  --on-primary: #04211E;
  --secondary: var(--violet-400);
}