/* ==========================================================================
   Theme Variables
   ========================================================================== */

:root {
  /* Backgrounds */
  --bg-primary: #0a0a0a;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #111;
  --bg-elevated: #252525;
  --bg-hover: #222;
  --bg-muted: #050505;
  --bg-overlay: rgba(0, 0, 0, 0.75);

  /* Text */
  --text-primary: #fafafa;
  --text-secondary: #888;
  --text-muted: #666;
  --text-disabled: #555;
  --text-faint: #444;
  --text-mid: #ccc;

  /* Borders */
  --border-primary: #333;
  --border-secondary: #222;
  --border-hover: #444;

  /* Accent */
  --accent-blue: #60a5fa;
  --accent-blue-hover: #3b82f6;
  --accent-blue-dark: #2563eb;

  /* Status */
  --color-success: #22c55e;
  --color-success-dark: #065f46;
  --color-danger: #ef4444;
  --color-danger-text: #f87171;
  --color-danger-bg: #dc2626;
  --color-danger-hover: #b91c1c;

  /* Special */
  --bg-today: #1a1a2e;
  --bg-info: #1e3a5f;
  --bg-danger-subtle: #2a1515;
  --bg-drag-over: #151520;
  --bg-form-alt: #151515;
  --bg-closed: #0f0f0f;

  /* Buttons */
  --btn-primary-bg: #fafafa;
  --btn-primary-text: #0a0a0a;
  --btn-secondary-bg: #333;
  --btn-secondary-text: #fafafa;
}

/* Cool Slate - blue-tinted light theme */
[data-theme="light-slate"] {
  /* Backgrounds - white with blue accents */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #c9dbf0;
  --bg-elevated: #b5cce8;
  --bg-hover: #dae6f5;
  --bg-muted: #f8fafc;
  --bg-overlay: rgba(15, 40, 80, 0.5);

  /* Text - blue-gray tones */
  --text-primary: #0a1628;
  --text-secondary: #2d4a6e;
  --text-muted: #4a6d94;
  --text-disabled: #7a9fc4;
  --text-faint: #a8c5e0;
  --text-mid: #1e3a5c;

  /* Borders */
  --border-primary: #a8c5e0;
  --border-secondary: #c9dbf0;
  --border-hover: #7a9fc4;

  /* Accent */
  --accent-blue: #2563eb;
  --accent-blue-hover: #1d4ed8;
  --accent-blue-dark: #1e40af;

  /* Status */
  --color-success: #16a34a;
  --color-success-dark: #15803d;
  --color-danger: #dc2626;
  --color-danger-text: #dc2626;
  --color-danger-bg: #dc2626;
  --color-danger-hover: #b91c1c;

  /* Special */
  --bg-today: #b8d4f0;
  --bg-info: #b8d4f0;
  --bg-danger-subtle: #fef2f2;
  --bg-drag-over: #c5dcf5;
  --bg-form-alt: #dae6f5;
  --bg-closed: #c9dbf0;

  /* Buttons */
  --btn-primary-bg: #2563eb;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #b5cce8;
  --btn-secondary-text: #1e3a5c;
}

/* Warm Cream - soft, organic, premium feel */
[data-theme="light-cream"] {
  /* Backgrounds - warm off-whites */
  --bg-primary: #fefdfb;
  --bg-secondary: #faf8f5;
  --bg-tertiary: #f5f0e8;
  --bg-elevated: #ebe4d8;
  --bg-hover: #ebe4d8;
  --bg-muted: #fefdfb;
  --bg-overlay: rgba(41, 37, 36, 0.5);

  /* Text - warm browns */
  --text-primary: #1c1917;
  --text-secondary: #57534e;
  --text-muted: #78716c;
  --text-disabled: #a8a29e;
  --text-faint: #d6d3d1;
  --text-mid: #44403c;

  /* Borders */
  --border-primary: #d6d3d1;
  --border-secondary: #e7e5e4;
  --border-hover: #a8a29e;

  /* Accent - warm amber instead of blue */
  --accent-blue: #b45309;
  --accent-blue-hover: #92400e;
  --accent-blue-dark: #78350f;

  /* Status */
  --color-success: #15803d;
  --color-success-dark: #166534;
  --color-danger: #dc2626;
  --color-danger-text: #b91c1c;
  --color-danger-bg: #dc2626;
  --color-danger-hover: #b91c1c;

  /* Special */
  --bg-today: #fef3c7;
  --bg-info: #fef3c7;
  --bg-danger-subtle: #fef2f2;
  --bg-drag-over: #fef9c3;
  --bg-form-alt: #faf8f5;
  --bg-closed: #f5f0e8;

  /* Buttons */
  --btn-primary-bg: #b45309;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #e7e0d4;
  --btn-secondary-text: #44403c;
}

/* Soft Sage - muted green-gray, calming (default light theme) */
[data-theme="light"],
[data-theme="light-sage"] {
  /* Backgrounds - sage/stone tints */
  --bg-primary: #fafbfa;
  --bg-secondary: #f3f5f3;
  --bg-tertiary: #e4e9e4;
  --bg-elevated: #d1d9d1;
  --bg-hover: #d1d9d1;
  --bg-muted: #fafbfa;
  --bg-overlay: rgba(28, 33, 28, 0.5);

  /* Text - muted greens */
  --text-primary: #14201a;
  --text-secondary: #4a5d52;
  --text-muted: #667a6e;
  --text-disabled: #97a89d;
  --text-faint: #c8d4cc;
  --text-mid: #3a4a40;

  /* Borders */
  --border-primary: #c8d4cc;
  --border-secondary: #dce4de;
  --border-hover: #97a89d;

  /* Accent - teal */
  --accent-blue: #0d9488;
  --accent-blue-hover: #0f766e;
  --accent-blue-dark: #115e59;

  /* Status */
  --color-success: #16a34a;
  --color-success-dark: #15803d;
  --color-danger: #dc2626;
  --color-danger-text: #b91c1c;
  --color-danger-bg: #dc2626;
  --color-danger-hover: #b91c1c;

  /* Special */
  --bg-today: #ccfbf1;
  --bg-info: #ccfbf1;
  --bg-danger-subtle: #fef2f2;
  --bg-drag-over: #d1fae5;
  --bg-form-alt: #f3f5f3;
  --bg-closed: #e4e9e4;

  /* Buttons */
  --btn-primary-bg: #0d9488;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #d1d9d1;
  --btn-secondary-text: #3a4a40;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  transition: background-color 0.2s, color 0.2s;
}

a {
  color: var(--accent-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Auth pages */
.auth-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.auth-container h1 {
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.form-group input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 1rem;
}

.form-group input:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.error {
  color: var(--color-danger-text);
  font-size: 0.875rem;
  margin-bottom: 1rem;
  min-height: 1.25rem;
}

.auth-container button {
  width: 100%;
  margin-top: 0.5rem;
}

.auth-link {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--text-secondary);
}

/* Buttons */
button {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 4px;
  transition: opacity 0.2s;
}

button:hover {
  opacity: 0.9;
}

button.secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
}