/* light theme */
:root {
  --color-background: #f5f5f5;
  --color-foreground: #333333;
  --color-primary: #ffffff;
  --color-primary-foreground: #222222;
  --color-secondary: #e0e0e0;
  --color-secondary-foreground: #444444;
  --color-secondary-hover: #d6d6d6;
  --color-secondary-foreground-hover: #222222;
  --color-popover: #ffffff;
  --color-popover-foreground: #333333;
  --color-muted: #aaaaaa;
  --color-muted-foreground: #666666;
  --color-accent: #007aff;
  --color-accent-foreground: #ffffff;
  --color-border: #dddddd;
  --color-shadow: #0002;
  --color-overlay: #00000022;
  --color-purple: #bd93f9;
  --color-green: #48d479;
  --color-yellow: #f1fa8c;
}

/* dark theme */
[data-theme="dark"] {
  --color-background: #333;
  --color-foreground: #f0f0f0;
  --color-primary: #222;
  --color-primary-foreground: #eee;
  --color-secondary: #fffc;
  --color-secondary-foreground: #222e;
  --color-secondary-hover: #fff;
  --color-secondary-foreground-hover: #222;
  --color-popover: #111e;
  --color-popover-foreground: #fafafa;
  --color-muted: #888;
  --color-muted-foreground: #ccc;
  --color-accent: #333;
  --color-accent-foreground: #fff;
  --color-border: #ccc;
  --color-shadow: #fff8;
  --color-overlay: #0004;
}

/* high-contrast theme */
[data-theme="high-contrast"] {
  --color-background: #000000;
  --color-foreground: #ffffff;
  --color-primary: #000000;
  --color-primary-foreground: #ffffff;
  --color-secondary: #ffff00;
  --color-secondary-foreground: #000000;
  --color-secondary-hover: #ffd700;
  --color-secondary-foreground-hover: #000000;
  --color-popover: #000000;
  --color-popover-foreground: #ffffff;
  --color-muted: #ffffff;
  --color-muted-foreground: #cccccc;
  --color-accent: #ff00ff;
  --color-accent-foreground: #ffffff;
  --color-border: #ffffff;
  --color-shadow: #ffffff88;
  --color-overlay: #ffffff55;
}