/* Theme Variables */
:root {
  /* Light Theme */
  --color-bg-primary: #fefefe;
  --color-bg-secondary: #f8f9fa;
  --color-bg-card: #ffffff;
  --color-text-primary: #2c3e50;
  --color-text-secondary: #6c757d;
  --color-border: #e9ecef;
  --color-accent: #c7a17a;
  --color-accent-light: #e6d3b3;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

[data-theme="dark"] {
  /* Dark Theme */
  --color-bg-primary: #1a1d24;
  --color-bg-secondary: #23272f;
  --color-bg-card: #2d3139;
  --color-text-primary: #f8f9fa;
  --color-text-secondary: #adb5bd;
  --color-border: #3a3f4b;
  --color-accent: #d4b089;
  --color-accent-light: #4a3c2a;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.3);
}

/* Theme Transition */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}