:root {
  color-scheme: light;

  --color-neutral-0: #ffffff;
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f3f4f6;
  --color-neutral-200: #e5e7eb;
  --color-neutral-300: #d1d5db;
  --color-neutral-400: #9ca3af;
  --color-neutral-500: #6b7280;
  --color-neutral-600: #4b5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1f2937;
  --color-neutral-900: #111827;

  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;

  --color-success-50: #ecfdf5;
  --color-success-100: #d1fae5;
  --color-success-500: #10b981;
  --color-success-700: #047857;

  --color-warning-50: #fff7ed;
  --color-warning-100: #ffedd5;
  --color-warning-500: #f59e0b;
  --color-warning-700: #b45309;

  --color-danger-50: #fef2f2;
  --color-danger-100: #fee2e2;
  --color-danger-500: #ef4444;
  --color-danger-700: #b91c1c;

  --color-bg: var(--color-neutral-100);
  --color-surface: var(--color-neutral-0);
  --color-surface-subtle: var(--color-neutral-50);
  --color-surface-muted: var(--color-neutral-100);
  --color-border: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-text: var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-500);
  --color-text-soft: var(--color-neutral-600);
  --color-primary: var(--color-primary-600);
  --color-primary-hover: var(--color-primary-700);
  --color-primary-active: var(--color-primary-800);
  --color-primary-soft: var(--color-primary-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;

  --size-xs: 11px;
  --size-sm: 12px;
  --size-md: 14px;
  --size-lg: 16px;
  --size-xl: 18px;
  --size-2xl: 20px;
  --size-3xl: 24px;
  --size-4xl: 32px;

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

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.08);

  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);
  --focus-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.16);

  --sidebar-width: 220px;
  --content-max-width: 1400px;
  --topbar-height: 68px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --color-neutral-0: #0f172a;
    --color-neutral-50: #111827;
    --color-neutral-100: #1f2937;
    --color-neutral-200: #374151;
    --color-neutral-300: #4b5563;
    --color-neutral-400: #6b7280;
    --color-neutral-500: #9ca3af;
    --color-neutral-600: #cbd5e1;
    --color-neutral-700: #e5e7eb;
    --color-neutral-800: #f3f4f6;
    --color-neutral-900: #ffffff;

    --color-bg: #0b1220;
    --color-surface: #111827;
    --color-surface-subtle: #0f172a;
    --color-surface-muted: #172033;
    --color-border: #243244;
    --color-border-strong: #334155;
    --color-text: #f8fafc;
    --color-text-muted: #a7b0be;
    --color-text-soft: #dbe3ee;

    --color-primary-soft: rgba(59, 130, 246, 0.16);
    --shadow-xs: 0 1px 2px rgba(2, 6, 23, 0.4);
    --shadow-sm: 0 8px 22px rgba(2, 6, 23, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}