:root {
  --color-primary: #C85A1F;
  --color-primary-hover: #D96A27;
  --color-primary-active: #B24D17;
  --color-primary-outline: rgba(200, 90, 31, 0.30);
  --color-primary-soft: rgba(200, 90, 31, 0.14);
  --color-primary-soft-strong: rgba(200, 90, 31, 0.16);
  --color-primary-glow: rgba(200, 90, 31, 0.10);

  --color-bg: #121212;
  --color-bg-dim: #1E1E1E;
  --color-surface: #1E1E1E;
  --color-surface-2: #242424;
  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.24);
  --color-surface-highlight: rgba(255, 255, 255, 0.08);
  --color-surface-highlight-hover: rgba(255, 255, 255, 0.16);
  --color-surface-subtle: rgba(255, 255, 255, 0.05);
  --color-surface-subtlest: rgba(255, 255, 255, 0.03);

  --color-text: #FFFFFF;
  --color-text-muted: #B0B0B0;
  --color-text-inverse: #111111;
  --color-placeholder: #6b7280;
  --color-success: #4CAF50;
  --color-success-dark: #2E7D32;
  --color-warning: #FFB300;
  --color-danger: #ff8a80;
  --color-danger-strong: #ff5252;
}

:root[data-theme="light"] {
  --color-primary: #C85A1F;
  --color-primary-hover: #D96A27;
  --color-primary-active: #B24D17;
  --color-primary-outline: rgba(200, 90, 31, 0.26);
  --color-primary-soft: rgba(200, 90, 31, 0.12);
  --color-primary-soft-strong: rgba(200, 90, 31, 0.18);
  --color-primary-glow: rgba(200, 90, 31, 0.14);

  --color-bg: #F7F7F5;
  --color-bg-dim: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-2: #F1F1EE;
  --color-border: rgba(15, 23, 42, 0.14);
  --color-border-strong: rgba(15, 23, 42, 0.26);
  --color-surface-highlight: rgba(15, 23, 42, 0.06);
  --color-surface-highlight-hover: rgba(15, 23, 42, 0.12);
  --color-surface-subtle: rgba(15, 23, 42, 0.04);
  --color-surface-subtlest: rgba(15, 23, 42, 0.02);

  --color-text: #17212B;
  --color-text-muted: #5B6470;
  --color-text-inverse: #FFFFFF;
  --color-placeholder: #7B8794;
  --color-success: #4CAF50;
  --color-success-dark: #2E7D32;
  --color-warning: #E6A000;
  --color-danger: #D14343;
  --color-danger-strong: #B42318;
}