/* =========================================================
   LOGIN CARD — Day Mode (global)
   Match the same card style as Dashboard / Profile / Account
   ========================================================= */

body.zen-calm:not(.balo-night) .login-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(2, 6, 23, 0.06) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  color: #0f172a !important;
}

/* Text inside login card must also switch to dark ink */
body.zen-calm:not(.balo-night) .login-card *,
body.zen-calm:not(.balo-night) .login-card input,
body.zen-calm:not(.balo-night) .login-card label,
body.zen-calm:not(.balo-night) .login-card .card-title {
  color: #0f172a !important;
}

/* Inputs (day mode) */
body.zen-calm:not(.balo-night) .login-card input {
  background: rgba(255, 255, 255, 0.90) !important;
  border: 1px solid rgba(2, 6, 23, 0.12) !important;
}

body.zen-calm:not(.balo-night) .login-card input::placeholder {
  color: rgba(15, 23, 42, 0.45) !important;
}

/* "OR" divider day mode */
body.zen-calm:not(.balo-night) .login-card .or {
  color: #475569 !important;
}

body.zen-calm:not(.balo-night) .login-card .or::before,
body.zen-calm:not(.balo-night) .login-card .or::after {
  background: rgba(2, 6, 23, 0.15) !important;
}
/* =========================================================
   1) COLOR TOKENS — Day / Night (never animate the shell)
   ========================================================= */

html,
body {
  transition: none !important;
}

/* -------------------------
   NEW DAY THEME (Soft Harmony)
   ------------------------- */
body.balo-day {
  --zen-bg-top: #f4f8fb;
  --zen-bg-bottom: #fdf7fa;
  --zen-ink: #0f172a;
  --zen-text: #0f172a;
  --zen-muted: #475569;
  --zen-card-bg: rgba(255, 255, 255, 0.94);
  --zen-card-bd: rgba(2, 6, 23, 0.06);
  --zen-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);

  color: var(--zen-text);
}

/* -------------------------
   NIGHT THEME — Beautiful Nebula
   ------------------------- */
body.balo-night {
  --zen-bg-top: #071018;
  --zen-bg-bottom: #071822;
  --zen-ink: #e9eefb;
  --zen-text: #e9eefb;
  --zen-muted: #9aa6b0;
  --zen-card-bg: rgba(10, 14, 20, 0.88);
  --zen-card-bd: rgba(148, 163, 184, 0.06);
  --zen-shadow: 0 10px 30px rgba(0, 0, 0, 0.36);

  color: var(--zen-text);
}

/* remove parent theme noise on html only */
html.balo-day,
html.balo-night,
html.zen-calm {
  background: transparent !important;
}

/* =========================================================
   2) ZEN CALM TEXT COLORS (no backgrounds here)
   ========================================================= */

body.zen-calm {
  color: #0f172a;
}

body.zen-calm.balo-night {
  color: #e9eefb;
}

/* =========================================================
   3) HERO STRUCTURE (unchanged layout)
   ========================================================= */

header.pf-hero,
.header-hero,
.hero-wrap {
  display: grid;
  place-items: center;
  text-align: center;
}

/* Let pages control color; keep only soft shadow helper */
#hero-title.hero-title,
.wind-flower {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* =========================================================
   4) DAY CARDS — Fully updated to match new day theme
   ========================================================= */

body.zen-calm:not(.balo-night) .db-card,
body.zen-calm:not(.balo-night) .mk-card,
body.zen-calm:not(.balo-night) .pf-card,
body.zen-calm:not(.balo-night) .acc-card,
body.zen-calm:not(.balo-night) .zen-card,
body.zen-calm:not(.balo-night) .dashboard-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(2, 6, 23, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  color: #0f172a;
}

/* Card titles */
body.zen-calm:not(.balo-night) h1,
body.zen-calm:not(.balo-night) h2,
body.zen-calm:not(.balo-night) h3,
body.zen-calm:not(.balo-night) .db-title,
body.zen-calm:not(.balo-night) .mk-title,
body.zen-calm:not(.balo-night) .pf-title,
body.zen-calm:not(.balo-night) .acc-title {
  color: #0f1522;
}

/* Card text */
body.zen-calm:not(.balo-night) p,
body.zen-calm:not(.balo-night) li,
body.zen-calm:not(.balo-night) .muted {
  color: #374151;
}

/* =========================================================
   5) HOME — Feature cards (inside layout only)
   ========================================================= */

body.zen-calm.home .feature-card {
  background: var(--zen-card-bg);
  border: 1px solid var(--zen-card-bd);
  box-shadow: var(--zen-shadow);
}

/* =========================================================
   6) LAYER SAFETY
   ========================================================= */

.pf-hero {
  position: relative;
}

.pf-hero .pf-shimmer {
  z-index: 0 !important;
  pointer-events: none;
}

/* No header glow */
/* ============================================
   Subscription & auth pages — day readability
   ============================================ */

/* Hero titles/subtitles in day mode: darker ink, no heavy glow */
body.balo-day .sub-hero,
body.balo-day .login-hero,
body.balo-day .register-hero,
body.balo-day .tos-hero,
body.balo-day .ss-hero,
body.balo-day .cp-hero {
  color: #0f172a;
}

body.balo-day .sub-hero .sub-title,
body.balo-day .sub-hero .sub-subtitle,
body.balo-day .login-hero .hero-title,
body.balo-day .login-hero .hero-subtitle,
body.balo-day .register-hero .hero-title,
body.balo-day .register-hero .hero-subtitle,
body.balo-day .tos-hero .tos-title,
body.balo-day .tos-hero .tos-subtitle,
body.balo-day .ss-hero .ss-title,
body.balo-day .ss-hero .ss-sub,
body.balo-day .cp-hero .cp-title,
body.balo-day .cp-hero .cp-sub {
  color: #0f172a;
  text-shadow: none;
}

/* Fix low contrast on ghost / alt / tab buttons in day mode */
body.balo-day .btn-alt,
body.balo-day .btn-ghost,
body.balo-day .btn.btn--ghost,
body.balo-day .btn-tab {
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.6);
  color: #0f172a !important;
  text-shadow: none;
}

/* Primary buttons keep the blue glow but are readable everywhere */
body.balo-day .btn,
body.balo-day a.btn,
body.balo-day button.btn {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 40%, #60a5fa 80%);
  color: #ffffff !important;
  text-shadow: none;
}