/* ============================================================
   Kidora Auth Overlay Skin — Sunny (login/signup)
   ------------------------------------------------------------
   First impression. Warm cream background, coral primary,
   Nunito. Sets the "warm assistant" tone before the data-dense
   Storybook shell loads after sign-in.

   Targets the existing #auth-overlay markup so login JS keeps
   working — purely a re-skin.
   ============================================================ */

[data-design="sunny"]#auth-overlay {
  background: linear-gradient(135deg, var(--k-bg), var(--k-bg-alt));
  font-family: var(--k-font-sans);
  color: var(--k-ink);
}

[data-design="sunny"]#auth-overlay .auth-card {
  background: var(--k-surface);
  border-radius: var(--k-r-xl);
  border: 1px solid var(--k-line);
  box-shadow: var(--k-shadow-lg);
  padding: 44px 40px;
  width: 440px;
  max-width: 96vw;
}

[data-design="sunny"]#auth-overlay .auth-brand {
  text-align: center;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

[data-design="sunny"]#auth-overlay .auth-brand h1 {
  font-family: var(--k-font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--k-ink);
  margin-top: 12px;
}

[data-design="sunny"]#auth-overlay .auth-brand p {
  font-family: var(--k-font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--k-ink-soft);
  margin-top: 6px;
}

/* Tabs — pill style on bg-alt */
[data-design="sunny"]#auth-overlay .auth-tabs {
  background: var(--k-bg-alt);
  border-radius: var(--k-r-pill);
  padding: 5px;
  margin-bottom: 24px;
  gap: 4px;
}
[data-design="sunny"]#auth-overlay .auth-tab {
  background: transparent;
  color: var(--k-ink-soft);
  font-family: var(--k-font-sans);
  font-size: 13px;
  font-weight: 700;
  padding: 10px;
  border-radius: var(--k-r-pill);
  transition: background var(--k-dur-fast) var(--k-ease),
              color var(--k-dur-fast) var(--k-ease);
}
[data-design="sunny"]#auth-overlay .auth-tab:hover { color: var(--k-ink); }
[data-design="sunny"]#auth-overlay .auth-tab.active {
  background: var(--k-surface);
  color: var(--k-coral);
  box-shadow: var(--k-shadow-sm);
}

/* Labels + inputs */
[data-design="sunny"]#auth-overlay .auth-card label {
  display: block;
  font-family: var(--k-font-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--k-ink-muted);
  margin-bottom: 8px;
  margin-top: 6px;
}

[data-design="sunny"]#auth-overlay .auth-card input[type=email],
[data-design="sunny"]#auth-overlay .auth-card input[type=password],
[data-design="sunny"]#auth-overlay .auth-card input[type=text] {
  width: 100%;
  background: var(--k-bg-alt);
  border: 2px solid transparent;
  border-radius: var(--k-r-md);
  padding: 14px 16px;
  font-family: var(--k-font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--k-ink);
  margin-bottom: 16px;
  transition: border-color var(--k-dur-fast) var(--k-ease),
              background var(--k-dur-fast) var(--k-ease),
              box-shadow var(--k-dur-fast) var(--k-ease);
}
[data-design="sunny"]#auth-overlay .auth-card input::placeholder {
  color: var(--k-ink-muted);
  font-weight: 500;
}
[data-design="sunny"]#auth-overlay .auth-card input:focus {
  outline: none;
  background: var(--k-surface);
  border-color: var(--k-coral);
  box-shadow: 0 0 0 4px var(--k-coral-soft);
}

/* Submit button — primary coral with 4px solid drop shadow */
[data-design="sunny"]#auth-overlay button[type="submit"],
[data-design="sunny"]#auth-overlay .auth-submit {
  display: block;
  width: 100%;
  background: var(--k-coral);
  color: var(--k-ink-on-color);
  border: none;
  border-radius: var(--k-r-md);
  padding: 16px 20px;
  font-family: var(--k-font-sans);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(42, 38, 32, 0.18);
  margin-top: 8px;
  transition: filter var(--k-dur-fast) var(--k-ease),
              transform var(--k-dur-fast) var(--k-ease),
              box-shadow var(--k-dur-fast) var(--k-ease);
}
[data-design="sunny"]#auth-overlay button[type="submit"]:hover,
[data-design="sunny"]#auth-overlay .auth-submit:hover { filter: brightness(1.05); }
[data-design="sunny"]#auth-overlay button[type="submit"]:active,
[data-design="sunny"]#auth-overlay .auth-submit:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(42, 38, 32, 0.18);
}
[data-design="sunny"]#auth-overlay button[type="submit"][disabled],
[data-design="sunny"]#auth-overlay .auth-submit[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}

/* Error/status messages */
[data-design="sunny"]#auth-overlay .auth-error,
[data-design="sunny"]#auth-overlay .auth-msg.error {
  background: var(--k-bad-soft);
  color: var(--k-bad);
  font-family: var(--k-font-sans);
  font-size: 13px;
  font-weight: 700;
  padding: 12px 14px;
  border-radius: var(--k-r-md);
  margin-top: 4px;
}
[data-design="sunny"]#auth-overlay .auth-success,
[data-design="sunny"]#auth-overlay .auth-msg.success {
  background: var(--k-good-soft);
  color: var(--k-good);
  font-family: var(--k-font-sans);
  font-size: 13px;
  font-weight: 700;
  padding: 12px 14px;
  border-radius: var(--k-r-md);
  margin-top: 4px;
}

/* Footer link (e.g. "Forgot password?") */
[data-design="sunny"]#auth-overlay .auth-footer,
[data-design="sunny"]#auth-overlay .auth-card a {
  color: var(--k-coral);
  font-family: var(--k-font-sans);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
[data-design="sunny"]#auth-overlay .auth-card a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}