/* Day mode: white, sky blue and gold, switched on by the lotus button in the header.
   Applies when <html data-mode="day">. Load after site.css. Mostly white with soft sky blue, a gold sun glow, deep navy text and gold accents. (Dawn, the blush version, is in dawn.css.) */

:root[data-mode="day"] {
  --white: #ffffff;
  --mist: #f3f8fd;
  --line: #dae6f2;
  --ink: #1f2d44;
  --ink-soft: #51627a;
  --night: #1f2d44;
  --purple: #2a6bb0;
  --purple-deep: #1f5590;
  --gold: #c9952f;
  --gold-soft: #e8c77d;
  --honey: #e6b84f;
  --dawn: radial-gradient(70% 80% at 85% 8%, rgba(252, 226, 160, 0.55) 0%, rgba(252, 226, 160, 0) 60%),
          linear-gradient(180deg, #ffffff 0%, #eef6fd 55%, #ddeefc 100%);
}

:root[data-mode="day"] body { background: var(--white); color: var(--ink); }
:root[data-mode="day"] h1, :root[data-mode="day"] h2, :root[data-mode="day"] h3 { color: #1b2a40; }

:root[data-mode="day"] .site-header { background: rgba(255, 255, 255, 0.94); border-bottom-color: var(--line); }

/* Heroes: sunrise instead of night sky */
:root[data-mode="day"] .hero, :root[data-mode="day"] .hero--page { background: var(--dawn); color: var(--ink); }
:root[data-mode="day"] .hero h1 { color: #1b2a40; }
:root[data-mode="day"] .hero p { color: #42536b; }
:root[data-mode="day"] .hero .btn--ghost, :root[data-mode="day"] .section:not(.section--night) .btn--ghost { color: var(--purple); }
:root[data-mode="day"] .btn--ghost:hover { background: rgba(42, 107, 176, 0.07); }
:root[data-mode="day"] .btn--gold { background: var(--honey); color: #1b2a40; }
:root[data-mode="day"] .btn--gold:hover { background: #f0cc72; color: #1b2a40; }
:root[data-mode="day"] .crumbs, :root[data-mode="day"] .crumbs a { color: var(--ink-soft); }

/* The lotus artwork sits in a round frame with a warm glow */
:root[data-mode="day"] .hero-art { width: min(100%, 470px); }
:root[data-mode="day"] .hero-art img {
  -webkit-mask-image: none; mask-image: none;
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.75), 0 34px 70px -24px rgba(40, 90, 150, 0.45), 0 0 90px rgba(250, 214, 130, 0.65);
}
@media (max-width: 760px) {
  :root[data-mode="day"] .hero-art { width: min(100%, 300px); margin-bottom: 1rem; }
}

/* Inner page headings: the lotus as a small round frame instead of a faded background */
:root[data-mode="day"] .hero--page::after {
  -webkit-mask-image: none; mask-image: none;
  width: 230px; right: max(16px, calc((100vw - 1120px) / 2 + 24px)); opacity: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.75), 0 24px 50px -20px rgba(40, 90, 150, 0.4);
}
:root[data-mode="day"] .hero--page .wrap > div { max-width: 40rem; }
@media (max-width: 960px) { :root[data-mode="day"] .hero--page::after { display: none; } }

/* Former night sections become soft lilac dawn */
:root[data-mode="day"] .section--night { background: linear-gradient(180deg, #f4f9fe 0%, #e4f0fc 100%); color: var(--ink); }
:root[data-mode="day"] .section--night h2, :root[data-mode="day"] .section--night h3 { color: #1b2a40; }
:root[data-mode="day"] .section--night a { color: var(--purple); }
:root[data-mode="day"] .section--night .lede { color: var(--ink-soft); }
:root[data-mode="day"] .section--night .chakra-list li { border-top-color: var(--line); }
:root[data-mode="day"] .section--night .chakra-list .num { color: var(--purple); }

/* Chakra slider: the light version, on a soft white sky */
:root[data-mode="day"] .chakra-art {
  background: radial-gradient(circle at 50% 38%, #ffffff 0%, #f6fafe 55%, #e9f3fc 100%);
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 0 0 1px #dbe7f3, 0 30px 60px -30px rgba(40, 80, 140, 0.35);
}
:root[data-mode="day"] .chakra-panel p { color: var(--ink-soft); }
:root[data-mode="day"] .chakra-num { color: #a87a1c; }
:root[data-mode="day"] .chakra-meta { color: #8a6414 !important; border-top-color: var(--line); }
:root[data-mode="day"] .chakra-slider .step { border-color: rgba(31, 45, 68, 0.22); color: var(--ink); }
:root[data-mode="day"] .chakra-slider .step:hover:not(:disabled) { border-color: var(--gold); color: #8a6414; }
:root[data-mode="day"] .chakra-ticks button { color: var(--ink-soft); }
:root[data-mode="day"] .chakra-ticks button[aria-current="true"] { background: var(--honey); color: #1b2a40; }

/* Pellowah box */
:root[data-mode="day"] .pellowah-box { background: rgba(255, 255, 255, 0.65); border-color: var(--gold); }
:root[data-mode="day"] .section--night .pellowah-box p { color: var(--ink); }

/* Cards and photos */
:root[data-mode="day"] .teacher { background: #fff; }
:root[data-mode="day"] .people-photo img { box-shadow: 0 24px 50px -24px rgba(40, 90, 150, 0.4); }
:root[data-mode="day"] .person { border-top-color: var(--honey); }
:root[data-mode="day"] .way, :root[data-mode="day"] .card { border-top-color: var(--honey); }

/* Footer: light and warm */
:root[data-mode="day"] .site-footer { background: #eef5fc; color: var(--ink-soft); }
:root[data-mode="day"] .site-footer a { color: var(--purple); }
:root[data-mode="day"] .site-footer h2 { color: #1b2a40; }
:root[data-mode="day"] .footer-small { border-top-color: var(--line); }
:root[data-mode="day"] .footer-logo { box-shadow: 0 8px 24px -10px rgba(40, 80, 140, 0.35); }

:root[data-mode="day"] .form-status--ok { background: #eef6ee; }