/* Theme tokens — light palette: EDF1D6 9DC08B 609966 40513B
 *                 dark palette:  40513B 628141 E5D9B6 E67E22
 * Semantic names (--bg, --primary, etc.) so components don't hardcode palette values.
 * Status colors (success/danger/warning) stay fixed across themes.
 * Note: #40513B ties both themes together (accent in light, bg in dark).
 */

:root,
[data-theme="light"] {
  --bg:            #EDF1D6;
  --surface:       #9DC08B;
  --surface-alt:   #B4CF9F;
  --text:          #40513B;
  --text-muted:    #4A5B3E;
  --text-on-primary: #FFFFFF;
  --text-on-accent:  #FFFFFF;
  --border:        #7EA06C;
  --border-soft:   #B4CF9F;

  --primary:       #609966;
  --primary-hover: #4D7E52;
  --secondary:     #40513B;
  --accent:        #40513B;

  --primary-gradient: linear-gradient(135deg, #9DC08B 0%, #609966 100%);
  --accent-gradient:  linear-gradient(135deg, #609966 0%, #40513B 100%);

  --shadow-sm:     0 2px 8px rgba(64, 81, 59, 0.08);
  --shadow-md:     0 4px 20px rgba(64, 81, 59, 0.12);
  --shadow-lg:     0 8px 30px rgba(96, 153, 102, 0.25);

  --success-bg:   #D4EDDA;
  --success-fg:   #155724;
  --danger-bg:    #F8D7DA;
  --danger-fg:    #721C24;
  --warning-bg:   #FFF3CD;
  --warning-fg:   #856404;
}

[data-theme="dark"] {
  --bg:            #40513B;
  --surface:       #4A5D44;
  --surface-alt:   #556B4F;
  --text:          #E5D9B6;
  --text-muted:    #B9AE91;
  --text-on-primary: #FFFFFF;
  --text-on-accent:  #2A1F12;
  --border:        #556B4F;
  --border-soft:   #4E6148;

  --primary:       #628141;
  --primary-hover: #7DA04E;
  --secondary:     #E67E22;
  --accent:        #E67E22;

  --primary-gradient: linear-gradient(135deg, #628141 0%, #7DA04E 100%);
  --accent-gradient:  linear-gradient(135deg, #628141 0%, #E67E22 100%);

  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md:     0 4px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg:     0 8px 30px rgba(0, 0, 0, 0.55);

  --success-bg:   #2F4A2F;
  --success-fg:   #C7E4B3;
  --danger-bg:    #5C2B24;
  --danger-fg:    #F1B4A6;
  --warning-bg:   #5C4A1F;
  --warning-fg:   #E5D9B6;
}

/* Global resets so themed body/card colors apply even on unmigrated pages */
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Bootstrap alert/form-control harmonization in dark mode */
[data-theme="dark"] .form-control {
  background-color: var(--surface-alt);
  color: var(--text);
  border-color: var(--border-soft);
}
[data-theme="dark"] .form-control:focus {
  background-color: var(--surface-alt);
  color: var(--text);
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem rgba(92, 131, 116, 0.25);
}
[data-theme="dark"] .form-control::placeholder { color: var(--text-muted); opacity: 0.7; }

/* Theme-toggle button — used in navbar and as floating control on auth pages */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  transition: background 0.15s, border-color 0.15s;
}
.theme-toggle:hover { background: var(--surface-alt); border-color: var(--primary); }

.theme-toggle-float {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1050;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* Show sun in dark mode, moon in light mode */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: inline; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: inline; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }