:root {
  --bg-primary: #d6d0c8;
  --bg-secondary: #e9e2d9;
  --bg-tertiary: #dcd4ca;
  --text-primary: #171411;
  --text-secondary: #4b443d;
  --text-tertiary: #6d645a;
  --border-color: #b9afa3;
  --hover-bg: rgba(23, 20, 17, 0.06);
  --hover-bg-darker: rgba(23, 20, 17, 0.13);
  --accent-primary: #111111;
  --accent-strong: #000000;
  --accent-surface: #d3cbc1;
  --accent-cyan: #111111;
  --accent-red: #6b1d1d;
  --shadow: 0 1px 2px rgba(23, 20, 17, 0.08), 0 8px 24px rgba(23, 20, 17, 0.05);
  --shadow-elevated: 0 4px 10px rgba(23, 20, 17, 0.08), 0 18px 36px rgba(23, 20, 17, 0.06);
  --shadow-glow: 0 0 0 1px rgba(23, 20, 17, 0.1), 0 8px 24px rgba(23, 20, 17, 0.12);
  --glass-bg: rgba(236, 230, 222, 0.92);
  --glass-border: rgba(23, 20, 17, 0.1);
  --button-bg: #111111;
  --button-bg-hover: #000000;
  --button-text: #ffffff;
}

body.dark-mode {
  --bg-primary: #050505;
  --bg-secondary: #101010;
  --bg-tertiary: #171717;
  --text-primary: #f2f2f2;
  --text-secondary: #b8b8b8;
  --text-tertiary: #888888;
  --border-color: #2b2b2b;
  --hover-bg: rgba(255, 255, 255, 0.1);
  --hover-bg-darker: rgba(255, 255, 255, 0.18);
  --accent-primary: #ffffff;
  --accent-strong: #e0e0e0;
  --accent-surface: #1a1a1a;
  --accent-cyan: #00d4ff;
  --accent-red: #ff6b6b;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 4px 6px rgba(0, 0, 0, 0.4), 0 20px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 0 1px rgba(0, 212, 255, 0.3), 0 8px 24px rgba(0, 212, 255, 0.2);
  --glass-bg: rgba(16, 16, 16, 0.9);
  --glass-border: rgba(255, 255, 255, 0.15);
  --button-bg: #ffffff;
  --button-bg-hover: #e0e0e0;
  --button-text: #000000;
}