/* HowHotHowLong - Theme Color Variables */

/* Dark theme (default) */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --primary:        #0e0e0e;
  --secondary:      #0891b2;
  --secondary-hover: #0673a0;
  --surface:        #101112;
  --black:          #000000;
  --background:     #0e0e0e;
  --text-primary:   #ffffff;
  --text-secondary: #b0b0b0;
  --error:          #f44336;
  --success:        #4caf50;
  --border:         #2a2a2a;
  --hover:          #1a1a1a;
  --hot:            #ef4444;
  --long:           #f97316;
}

/* Light theme */
[data-theme="light"] {
  color-scheme: light;
  --primary:        #f0f2f5;
  --secondary:      #0891b2;
  --secondary-hover: #0673a0;
  --surface:        #ffffff;
  --black:          #000000;
  --background:     #f0f2f5;
  --text-primary:   #1a1a1a;
  --text-secondary: #6b7280;
  --error:          #c62828;
  --success:        #2e7d32;
  --border:         #dde1e7;
  --hover:          #e4e6ea;
  --hot:            #ef4444;
  --long:           #f97316;
}

/* OS default: apply light vars when OS prefers light and no explicit theme is set */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: light;
    --primary:        #f0f2f5;
    --secondary:      #0891b2;
    --secondary-hover: #0673a0;
    --surface:        #ffffff;
    --black:          #000000;
    --background:     #f0f2f5;
    --text-primary:   #1a1a1a;
    --text-secondary: #6b7280;
    --error:          #c62828;
    --success:        #2e7d32;
    --border:         #dde1e7;
    --hover:          #e4e6ea;
    --hot:            #ef4444;
    --long:           #f97316;
  }
}