:root,
[data-theme="dark"] {
  --primary-50: #E6FFFE;
  --primary-100: #B3FFFC;
  --primary-200: #80FFF9;
  --primary-300: #4DFDF5;
  --primary-400: #22D3EE;
  --primary-500: #14B8A6;
  --primary-600: #0D9488;
  --primary-700: #0F766E;
  --primary-800: #115E59;
  --primary-900: #134E4A;

  --secondary-400: #FBBF24;
  --secondary-500: #F59E0B;
  --secondary-600: #D97706;

  --success: #34D399;
  --warning: #FBBF24;
  --danger: #F87171;
  --info: #60A5FA;

  --bg-base: #1A1D23;
  --bg-surface: #22262E;
  --bg-raised: #2A2F38;
  --bg-elevated: #323842;

  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-disabled: #475569;
  --text-inverse: #1A1D23;

  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.12);

  --neu-shadow-dark: rgba(0, 0, 0, 0.5);
  --neu-shadow-light: rgba(255, 255, 255, 0.03);

  --selection-bg: rgba(20, 184, 166, 0.3);

  --glass-bg: rgba(34, 38, 46, 0.6);
  --glass-bg-strong: rgba(34, 38, 46, 0.8);
  --glass-blur: 16px;
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.15);
  --glass-highlight: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, transparent 50%);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
}

[data-theme="light"] {
  --bg-base: #F8FAFC;
  --bg-surface: #F1F5F9;
  --bg-raised: #FFFFFF;
  --bg-elevated: #FFFFFF;

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --text-disabled: #CBD5E1;
  --text-inverse: #F1F5F9;

  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-default: rgba(0, 0, 0, 0.1);
  --border-strong: rgba(0, 0, 0, 0.15);

  --neu-shadow-dark: rgba(0, 0, 0, 0.12);
  --neu-shadow-light: rgba(255, 255, 255, 0.8);

  --selection-bg: rgba(20, 184, 166, 0.2);

  --glass-bg: rgba(255, 255, 255, 0.5);
  --glass-bg-strong: rgba(255, 255, 255, 0.75);
  --glass-blur: 16px;
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-border-hover: rgba(0, 0, 0, 0.12);
  --glass-highlight: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
}

.glass-surface {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  position: relative;
}

.glass-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-highlight);
  pointer-events: none;
}

.glass-raised {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow:
    6px 6px 12px var(--neu-shadow-dark),
    -6px -6px 12px var(--neu-shadow-light);
}

.glass-subtle {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow:
    3px 3px 6px var(--neu-shadow-dark),
    -3px -3px 6px var(--neu-shadow-light);
}

.glass-inset {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1.5px solid var(--glass-border);
  box-shadow:
    inset 4px 4px 8px var(--neu-shadow-dark),
    inset -4px -4px 8px var(--neu-shadow-light);
}

.glass-glow {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border-hover);
  box-shadow:
    0 0 20px rgba(34, 211, 238, 0.15),
    6px 6px 12px var(--neu-shadow-dark),
    -6px -6px 12px var(--neu-shadow-light);
}

.glass-panel {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(calc(var(--glass-blur) * 1.5));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.5));
  border: 1px solid var(--glass-border);
  box-shadow:
    6px 6px 12px var(--neu-shadow-dark),
    -6px -6px 12px var(--neu-shadow-light);
}

.glass-raised:hover,
.glass-subtle:hover {
  border-color: var(--glass-border-hover);
}

.neu-raised {
  box-shadow:
    6px 6px 12px var(--neu-shadow-dark),
    -6px -6px 12px var(--neu-shadow-light);
}

.neu-inset {
  box-shadow:
    inset 4px 4px 8px var(--neu-shadow-dark),
    inset -4px -4px 8px var(--neu-shadow-light);
}

.neu-subtle {
  box-shadow:
    3px 3px 6px var(--neu-shadow-dark),
    -3px -3px 6px var(--neu-shadow-light);
}

.neu-glow {
  box-shadow:
    0 0 20px rgba(34, 211, 238, 0.15),
    6px 6px 12px var(--neu-shadow-dark),
    -6px -6px 12px var(--neu-shadow-light);
}