:root {
  /* Brand */
  --color-night-950: #080b16;
  --color-night-900: #0b132b;
  --color-night-800: #131a2e;
  --color-night-700: #1d2843;
  --color-electric-700: #3850d9;
  --color-electric-600: #2563eb;
  --color-electric-500: #6880ff;
  --color-turquoise-600: #0aafa4;
  --color-turquoise-500: #14b8a6;
  --color-turquoise-400: #5ce4d8;
  --color-violet-600: #7950e8;
  --color-violet-500: #8b5cf6;
  --color-violet-400: #a78bfa;

  /* Neutral */
  --color-white: #ffffff;
  --color-off-white: #f1f5f9;
  --color-neutral-50: #f1f5f9;
  --color-neutral-100: #e8ebf1;
  --color-neutral-200: #d8dde7;
  --color-neutral-300: #bcc4d2;
  --color-neutral-400: #929daf;
  --color-neutral-500: #64748b;
  --color-neutral-600: #4b5568;
  --color-neutral-700: #343e51;
  --color-neutral-800: #20293a;

  /* Semantic */
  --color-success: #22c55e;
  --color-success-soft: #e7f8f3;
  --color-danger: #ef4444;
  --color-danger-soft: #fcecef;
  --color-info: var(--color-electric-600);
  --color-info-soft: #eef1ff;
  --color-focus: #91a2ff;

  /* Surfaces and text */
  --surface-canvas: var(--color-off-white);
  --surface-card: var(--color-white);
  --surface-subtle: var(--color-neutral-50);
  --surface-inverse: var(--color-night-900);
  --text-primary: var(--color-night-900);
  --text-secondary: var(--color-neutral-500);
  --text-tertiary: var(--color-neutral-400);
  --text-inverse: var(--color-white);
  --border-subtle: var(--color-neutral-100);
  --border-strong: var(--color-neutral-200);

  /* Typography · Geist is self-hostable; system UI is the safe fallback */
  --font-sans: Manrope, Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, monospace;
  --font-size-2xs: .6875rem;
  --font-size-xs: .75rem;
  --font-size-sm: .875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: clamp(1.75rem, 4vw, 2.5rem);
  --font-size-display: clamp(2rem, 6vw, 3.75rem);
  --line-height-tight: 1.1;
  --line-height-heading: 1.25;
  --line-height-body: 1.55;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing · 4px base */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Shape */
  --radius-xs: .375rem;
  --radius-sm: .625rem;
  --radius-md: .875rem;
  --radius-lg: 1.125rem;
  --radius-xl: 1.5rem;
  --radius-full: 999px;
  --shadow-xs: 0 1px 2px rgba(8, 11, 22, .04);
  --shadow-sm: 0 5px 18px rgba(8, 11, 22, .06);
  --shadow-md: 0 16px 40px rgba(8, 11, 22, .09);
  --shadow-lg: 0 28px 70px rgba(8, 11, 22, .14);
  --shadow-focus: 0 0 0 4px rgba(79, 107, 255, .18);

  /* Motion */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-enter: cubic-bezier(.16, 1, .3, 1);

  /* Layers */
  --z-base: 0;
  --z-sticky: 20;
  --z-sidebar: 30;
  --z-backdrop: 40;
  --z-modal: 50;
  --z-toast: 60;

  /* Breakpoint reference: 600px / 1024px / 1280px */
  --breakpoint-tablet: 600px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1280px;
}

[data-theme="dark"] {
  --surface-canvas: #080f21; --surface-card: #101a31; --surface-subtle: #17213a;
  --text-primary: #f1f5f9; --text-secondary: #aeb8c8; --text-tertiary: #8793a6;
  --border-subtle: #202d48; --border-strong: #31405d; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] { --surface-canvas:#080f21;--surface-card:#101a31;--surface-subtle:#17213a;--text-primary:#f1f5f9;--text-secondary:#aeb8c8;--text-tertiary:#8793a6;--border-subtle:#202d48;--border-strong:#31405d;color-scheme:dark; }
}