:root {
  --container-width: 1200px;
  --header-height: 80px;
  --grid-gap: 20px;
  --card-radius: 16px;
  --btn-radius: 10px;
  --transition: 0.2s ease;
}

:root,
[data-theme="light"] {
  --bg-page: #ffffff;
  --bg-card: #f8f9fa;
  --bg-elevated: #f1f3f5;
  --bg-border: #e2e8f0;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-tertiary: #94a3b8;
  --accent: #1e293b;
  --accent-hover: #0f172a;
  --accent-text: #ffffff;
  --danger: #ef4444;
  --danger-bg: #fee2e2;
}

[data-theme="dark"] {
  --bg-page: #111111;
  --bg-card: #1e1e1e;
  --bg-elevated: #2d2d2d;
  --bg-border: #3d3d3d;
  --text-primary: #f0f0f0;
  --text-secondary: #b0b0b0;
  --text-tertiary: #888888;
  --accent: #e1d6c4;
  --accent-hover: #d4c6b0;
  --accent-text: #000000;
  --danger: #f87171;
  --danger-bg: #7f1a1a;
}