:root {
  --bg: #0b1220;
  --surface: #0f1b2d;
  --surface-elevated: #12243a;
  --border: #1f2a3d;

  --text: #e6edf7;
  --muted: #a9b4c7;
  --text-muted: #7f8ba3;
  --text-tertiary: #63708a;

  --primary: #22c55e;
  --primary-hover: #16a34a;
  --accent: #06b6d4;
  --danger: #ef4444;
  --danger-rgb: 239, 68, 68;
  --ring: rgba(34, 197, 94, 0.35);

  --color-primary: var(--primary);
  --color-primary-rgb: 34, 197, 94;
  --color-primary-dark: var(--primary-hover);
  --color-primary-light: #4ade80;

  --color-secondary: var(--accent);
  --color-secondary-rgb: 6, 182, 212;
  --color-secondary-dark: #0891b2;
  --color-secondary-light: #22d3ee;

  --color-accent: var(--accent);
  --color-accent-rgb: 6, 182, 212;

  --color-success: var(--primary);
  --color-warning: var(--accent);
  --color-error: var(--danger);

  --bg-primary: var(--bg);
  --bg-primary-rgb: 11, 18, 32;

  --bg-secondary: var(--surface);
  --bg-secondary-rgb: 15, 27, 45;

  --bg-tertiary: var(--surface-elevated);
  --bg-tertiary-rgb: 18, 36, 58;

  --bg-elevated: #152943;
  --bg-overlay: rgba(11, 18, 32, 0.85);

  --text-primary: var(--text);
  --text-primary-rgb: 230, 237, 247;

  --text-secondary: var(--muted);
  --text-secondary-rgb: 169, 180, 199;

  --text-muted-rgb: 127, 139, 163;
  --text-tertiary-rgb: 99, 112, 138;

  --text-inverse: #0b1220;

  --border-primary: var(--border);

  --primary-light: var(--color-primary-light);

  --robot-body-primary: #0f1b2d;
  --robot-body-secondary: #0b1220;
  --robot-body-highlight: #1f2a3d;

  --robot-glow-primary: #22c55e;
  --robot-glow-secondary: #06b6d4;

  --robot-joint-color: #1f2a3d;
  --robot-eye-color: #e6edf7;
  --robot-core-color: #22c55e;

  --robot-head-accent: #22c55e;
  --robot-torso-accent: #06b6d4;
  --robot-arm-right-accent: #06b6d4;
  --robot-arm-left-accent: #22c55e;
  --robot-leg-right-accent: #06b6d4;
  --robot-leg-left-accent: #22c55e;

  --spacing-3xs: 0.125rem;
  --spacing-2xs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 6rem;
  --spacing-5xl: 8rem;

  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --font-size-2xs: 0.625rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 3rem;
  --font-size-5xl: 4rem;
  --font-size-hero: 5rem;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --line-height-none: 1;
  --line-height-tight: 1.2;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 3px;
  --border-width-heavy: 4px;

  --shadow-sm: 0 1px 2px rgba(5, 10, 18, 0.4);
  --shadow-md: 0 6px 16px rgba(5, 10, 18, 0.45);
  --shadow-lg: 0 12px 28px rgba(5, 10, 18, 0.5);
  --shadow-xl: 0 18px 36px rgba(5, 10, 18, 0.55);
  --shadow-2xl: 0 26px 50px rgba(5, 10, 18, 0.6);

  --shadow-glow-cyan: 0 10px 24px rgba(34, 197, 94, 0.18);
  --shadow-glow-magenta: 0 10px 24px rgba(6, 182, 212, 0.15);
  --shadow-glow-purple: 0 10px 24px rgba(6, 182, 212, 0.12);

  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);

  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;
  --duration-slowest: 1000ms;

  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);

  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-normal: var(--duration-normal) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-in-out);
  --transition-bounce: var(--duration-normal) var(--ease-bounce);

  --transition-color: color var(--transition-fast);
  --transition-bg: background-color var(--transition-fast);
  --transition-transform: transform var(--transition-normal);
  --transition-opacity: opacity var(--transition-normal);
  --transition-shadow: box-shadow var(--transition-normal);
  --transition-all: all var(--transition-normal);

  --z-deep: -1;
  --z-base: 0;
  --z-default: 1;
  --z-raised: 10;
  --z-robot: 20;
  --z-robot-parts: 25;
  --z-robot-glow: 30;
  --z-navigation: 50;
  --z-dropdown: 60;
  --z-sticky: 70;
  --z-modal-backdrop: 80;
  --z-modal: 90;
  --z-tooltip: 100;
  --z-preloader: 999;

  --breakpoint-xs: 320px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  --robot-container-width: 500px;
  --robot-container-height: 700px;

  --robot-head-width: 120px;
  --robot-head-height: 140px;
  --robot-head-top: 0;

  --robot-torso-width: 180px;
  --robot-torso-height: 220px;
  --robot-torso-top: 130px;

  --robot-arm-width: 50px;
  --robot-arm-height: 180px;
  --robot-arm-top: 150px;
  --robot-arm-left-position: -60px;
  --robot-arm-right-position: calc(100% + 10px);

  --robot-leg-width: 60px;
  --robot-leg-height: 220px;
  --robot-leg-top: 340px;
  --robot-leg-left-position: 60px;
  --robot-leg-right-position: calc(100% - 120px);

  --robot-disperse-distance: 300px;
  --robot-disperse-rotation: 45deg;
}

[data-theme='light'] {
  --bg: #f7f9fc;
  --surface: #ffffff;
  --surface-elevated: #f2f5fb;
  --border: #d9e2f1;

  --text: #0b1220;
  --muted: #4a5b76;
  --text-muted: #66758f;
  --text-tertiary: #7a8aa3;

  --primary: #16a34a;
  --primary-hover: #15803d;
  --accent: #0891b2;
  --danger: #ef4444;
  --ring: rgba(22, 163, 74, 0.25);

  --bg-primary: var(--bg);
  --bg-secondary: var(--surface);
  --bg-tertiary: var(--surface-elevated);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --border-primary: var(--border);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --duration-slowest: 0ms;
  }
}