/**
 * Login / signup auth page — light theme only.
 * Scoped to #auth-page and #forgot-password-modal. Dark mode untouched.
 */

/* —— Page canvas —— */
html:not(.dark) #auth-page {
  background-color: #F5F2E9 !important;
}

html:not(.dark) #auth-page > .bg-pattern {
  background-image:
    linear-gradient(to right, rgba(13, 92, 79, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13, 92, 79, 0.05) 1px, transparent 1px);
}

html:not(.dark) #auth-page > [class*="from-emerald-200"] {
  opacity: 0.28 !important;
}

/* —— Typography —— */
html:not(.dark) #auth-page .text-slate-900 {
  color: #1D1D1D !important;
}

html:not(.dark) #auth-page .text-slate-500,
html:not(.dark) #auth-page .text-slate-600,
html:not(.dark) #auth-page .text-slate-400 {
  color: rgba(29, 29, 29, 0.65) !important;
}

html:not(.dark) #auth-page .text-emerald-600,
html:not(.dark) #auth-page .text-emerald-400 {
  color: #18B98F !important;
}

/* —— Back button —— */
html:not(.dark) #auth-page #back-to-home-btn .rounded-full.bg-white {
  background-color: #FFFFFF !important;
  border: 1px solid #D7D1C3 !important;
}

/* —— Logo mark —— */
html:not(.dark) #auth-page [class*="from-emerald-600"].rounded-xl {
  background-color: #18B98F !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* —— Main auth card (white) —— */
html:not(.dark) #auth-page .glass.bg-white\/50 {
  background-color: #FFFFFF !important;
  border: 1px solid #D7D1C3 !important;
  box-shadow: 0 30px 80px -20px rgba(13, 92, 79, 0.15) !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}

html:not(.dark) #auth-page .glass > .bg-white {
  background-color: #FFFFFF !important;
  border: none !important;
}

/* —— Cream input fields & Google button —— */
html:not(.dark) #auth-page .input-wrapper,
html:not(.dark) #auth-page .auth-google-btn {
  background-color: #F5F2E9 !important;
  border: 1px solid #D7D1C3 !important;
}

html:not(.dark) #auth-page .auth-google-btn:hover {
  background-color: #EDE9DF !important;
}

html:not(.dark) #auth-page .input-wrapper:focus-within {
  border-color: #18B98F !important;
  box-shadow: 0 0 0 4px rgba(24, 185, 143, 0.12) !important;
}

html:not(.dark) #auth-page .border-slate-200,
html:not(.dark) #auth-page .border-slate-100,
html:not(.dark) #auth-page .border-slate-300 {
  border-color: #D7D1C3 !important;
}

/* —— Checkboxes —— */
html:not(.dark) #auth-page .custom-checkbox input:checked + div {
  background-color: #18B98F !important;
  border-color: #18B98F !important;
}

html:not(.dark) #auth-page .custom-checkbox div.bg-white {
  background-color: #FFFFFF !important;
  border-color: #D7D1C3 !important;
}

/* —— Password strength —— */
html:not(.dark) #auth-page .password-strength-track {
  background-color: #F5F2E9 !important;
  border: 1px solid #D7D1C3;
}

/* —— Primary buttons —— */
html:not(.dark) #auth-page button.bg-emerald-600,
html:not(.dark) #auth-page a.bg-emerald-600 {
  background-color: #18B98F !important;
  background-image: none !important;
  box-shadow: 0 1px 2px rgba(29, 29, 29, 0.06) !important;
}

html:not(.dark) #auth-page button.bg-emerald-600:hover,
html:not(.dark) #auth-page a.bg-emerald-600:hover {
  filter: brightness(0.96);
}

/* —— Forgot password modal —— */
html:not(.dark) #forgot-password-modal > .bg-white {
  background-color: #FFFFFF !important;
  border: 1px solid #D7D1C3 !important;
  box-shadow: 0 30px 80px -20px rgba(13, 92, 79, 0.15) !important;
}

html:not(.dark) #forgot-password-modal .text-slate-900 {
  color: #1D1D1D !important;
}

html:not(.dark) #forgot-password-modal .text-slate-500,
html:not(.dark) #forgot-password-modal .text-slate-400 {
  color: rgba(29, 29, 29, 0.65) !important;
}

html:not(.dark) #forgot-password-modal input,
html:not(.dark) #forgot-password-modal button.bg-slate-100 {
  background-color: #F5F2E9 !important;
  border: 1px solid #D7D1C3 !important;
  color: #1D1D1D !important;
}

html:not(.dark) #forgot-password-modal button.bg-slate-100:hover {
  background-color: #EDE9DF !important;
}

html:not(.dark) #forgot-password-modal button.bg-emerald-600 {
  background-color: #18B98F !important;
  box-shadow: 0 1px 2px rgba(29, 29, 29, 0.06) !important;
}

html:not(.dark) #forgot-password-modal .text-emerald-600,
html:not(.dark) #forgot-password-modal .text-emerald-400 {
  color: #18B98F !important;
}

html:not(.dark) #forgot-password-modal .border-slate-200 {
  border-color: #D7D1C3 !important;
}

html:not(.dark) #forgot-password-modal #close-forgot-password-modal:hover {
  background-color: #F5F2E9 !important;
}