/* =========================================================
   themes.css – Full-page color themes via body[data-theme]
   Each theme overrides both the accent palette (forest/sage)
   and the neutral palette (bg/surface/border/text-muted) so
   the entire page feel changes, not just buttons and links.
   ========================================================= */

/* ── Meadow ──────────────────────────────────────────────── */
body[data-theme="meadow"] {
  --accent:      #4A7868;
  --accent-lt:   #5E9480;
  --accent-dk:   #345A4E;
  --tint:        #9ABFB8;
  --tint-lt:     #C0D8D4;
  --tint-xlt:    #EEF6F4;
  --warm:        #EDE8DC;

  --bg:          #EAE4D8;
  --surface:     #F8F4EE;
  --border:      #D0C8B4;
  --text-muted:  #7A7060;

  --focus-ring:   rgba(154,191,184,0.28);
  --login-grad-1: rgba(52,90,78,0.55);
  --login-grad-2: rgba(154,191,184,0.22);
}

/* ── Lavender ────────────────────────────────────────────── */
body[data-theme="lavender"] {
  --accent:      #4A3E98;
  --accent-lt:   #6050B8;
  --accent-dk:   #2A2870;
  --tint:        #9278C0;
  --tint-lt:     #C0AEE0;
  --tint-xlt:    #F0ECFA;
  --warm:        #EAE4F8;

  --bg:          #E4E0F4;
  --surface:     #F6F4FC;
  --border:      #CCC4E0;
  --text-muted:  #706888;

  --focus-ring:   rgba(146,120,192,0.25);
  --login-grad-1: rgba(42,40,112,0.60);
  --login-grad-2: rgba(146,120,192,0.22);
}

/* ── Prairie ─────────────────────────────────────────────── */
body[data-theme="prairie"] {
  --accent:      #686040;
  --accent-lt:   #847A52;
  --accent-dk:   #4E4A2C;
  --tint:        #B888A8;
  --tint-lt:     #D4B0C8;
  --tint-xlt:    #F6EEF4;
  --warm:        #EEE0D4;

  --bg:          #EDE4DA;
  --surface:     #F8F2EC;
  --border:      #D4C2AE;
  --text-muted:  #8A7860;

  --focus-ring:   rgba(184,136,168,0.25);
  --login-grad-1: rgba(78,74,44,0.58);
  --login-grad-2: rgba(184,136,168,0.22);
}

/* ── Wildflower ──────────────────────────────────────────── */
body[data-theme="wildflower"] {
  --accent:      #6A5C80;
  --accent-lt:   #8070A0;
  --accent-dk:   #4E4460;
  --tint:        #9888B0;
  --tint-lt:     #C0B0D0;
  --tint-xlt:    #EDE8F4;
  --warm:        #E8E0EE;

  --bg:          #E2DCE8;
  --surface:     #F3EEF8;
  --border:      #C8BED4;
  --text-muted:  #78687A;

  --focus-ring:   rgba(106,92,128,0.25);
  --login-grad-1: rgba(55,73,113,0.58);
  --login-grad-2: rgba(106,92,128,0.22);
}

/* ── Coastal ─────────────────────────────────────────────── */
body[data-theme="coastal"] {
  --accent:      #286FB4;
  --accent-lt:   #3A84CC;
  --accent-dk:   #1A5290;
  --tint:        #5AAAC8;
  --tint-lt:     #B0DDE4;
  --tint-xlt:    #EAF6FA;
  --warm:        #E2F0F9;

  --bg:          #D8EDF8;
  --surface:     #F4FAFD;
  --border:      #B4D4E8;
  --text-muted:  #4A7A9A;

  --focus-ring:   rgba(40,111,180,0.22);
  --login-grad-1: rgba(26,82,144,0.60);
  --login-grad-2: rgba(223,76,115,0.20);
}

/* ── Pumpkin Spice ───────────────────────────────────────── */
body[data-theme="pumpkin"] {
  --accent:      #A25721;
  --accent-lt:   #C06828;
  --accent-dk:   #643820;
  --tint:        #D4903A;
  --tint-lt:     #EAD596;
  --tint-xlt:    #F8F3E0;
  --warm:        #F0E8D0;

  --bg:          #EDE3C8;
  --surface:     #FBF7EE;
  --border:      #D8C898;
  --text-muted:  #8A6038;

  --focus-ring:   rgba(162,87,33,0.22);
  --login-grad-1: rgba(100,56,32,0.62);
  --login-grad-2: rgba(239,147,62,0.22);
}

/* ── Earthy ──────────────────────────────────────────────── */
body[data-theme="earthy"] {
  --accent:      #3B6255;
  --accent-lt:   #4E7A68;
  --accent-dk:   #2A4A3E;
  --tint:        #8BA49A;
  --tint-lt:     #CBDED3;
  --tint-xlt:    #EBF2EE;
  --warm:        #E8E0CC;

  --bg:          #DDE8E2;
  --surface:     #F4F2EE;
  --border:      #C0CECA;
  --text-muted:  #607870;

  --focus-ring:   rgba(59,98,85,0.22);
  --login-grad-1: rgba(42,74,62,0.58);
  --login-grad-2: rgba(139,164,154,0.22);
}

/* ── Stone Path ──────────────────────────────────────────── */
body[data-theme="stone"] {
  --accent:      #5A5448;
  --accent-lt:   #726A5C;
  --accent-dk:   #443E34;
  --tint:        #8A8270;
  --tint-lt:     #B4AEA0;
  --tint-xlt:    #F2F0EC;
  --warm:        #ECEAE4;

  --bg:          #E0DCD4;
  --surface:     #F5F2EE;
  --border:      #C4BEB0;
  --text-muted:  #78706A;

  --focus-ring:   rgba(138,130,112,0.22);
  --login-grad-1: rgba(68,62,52,0.55);
  --login-grad-2: rgba(138,130,112,0.20);
}

/* ── Stargazer ───────────────────────────────────────────── */
body[data-theme="stargazer"] {
  --accent:      #C87880;
  --accent-lt:   #DA9298;
  --accent-dk:   #A05862;
  --tint:        #5268B0;
  --tint-lt:     #7888C8;
  --tint-xlt:    #1C2440;
  --warm:        #1C1A30;

  --bg:          #0E1520;
  --surface:     #16202E;
  --border:      #243048;
  --text:        #E4E0F0;
  --text-muted:  #8A94B8;

  --focus-ring:   rgba(200,120,128,0.30);
  --login-grad-1: rgba(26,44,128,0.65);
  --login-grad-2: rgba(218,138,139,0.25);
}

body[data-theme="stargazer"] .btn-secondary {
  background: rgba(255,255,255,0.07);
  color: #C8D0E4;
  border-color: rgba(255,255,255,0.14);
}
body[data-theme="stargazer"] .btn-secondary:hover {
  background: rgba(255,255,255,0.12);
}
body[data-theme="stargazer"] .btn-ghost {
  color: #C8D0E4;
  border-color: rgba(255,255,255,0.14);
}
body[data-theme="stargazer"] .btn-ghost:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.25);
}

body[data-theme="dark"] .btn-secondary {
  background: rgba(255,255,255,0.07);
  color: #C8D0D8;
  border-color: rgba(255,255,255,0.14);
}
body[data-theme="dark"] .btn-secondary:hover {
  background: rgba(255,255,255,0.12);
}
body[data-theme="dark"] .btn-ghost {
  color: #C8D0D8;
  border-color: rgba(255,255,255,0.14);
}
body[data-theme="dark"] .btn-ghost:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.25);
}
body[data-theme="stargazer"] input[type="date"].form-input::-webkit-calendar-picker-indicator,
body[data-theme="dark"] input[type="date"].form-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.5;
}
body[data-theme="stargazer"] input[type="date"].form-input::-webkit-calendar-picker-indicator:hover,
body[data-theme="dark"] input[type="date"].form-input::-webkit-calendar-picker-indicator:hover {
  opacity: 0.8;
}

/* ── Dark ────────────────────────────────────────────────── */
body[data-theme="dark"] {
  --accent:      #6AAE98;
  --accent-lt:   #80C4B0;
  --accent-dk:   #4A8A78;
  --tint:        #5898A8;
  --tint-lt:     #7AB4C4;
  --tint-xlt:    #1A2C32;
  --warm:        #1E222C;

  --bg:          #191C22;
  --surface:     #232830;
  --border:      #363C48;
  --text:        #E4E0D8;
  --text-muted:  #8C98A8;

  --focus-ring:   rgba(106,174,152,0.30);
  --login-grad-1: rgba(26,44,50,0.70);
  --login-grad-2: rgba(106,174,152,0.25);
}