/* Dawn mode: soft peach, blush and lilac, one of the three looks the lotus button cycles through.
   Applies when <html data-mode="dawn">. Load after site.css. Sunrise tones: peach, blush and lilac, with plum text and honey gold. */

:root[data-mode="dawn"] {
  --white: #fffaf6;
  --mist: #fbefe9;
  --line: #ecd9d4;
  --ink: #33243a;
  --ink-soft: #6e5c72;
  --night: #33243a;
  --purple: #6a3d8f;
  --purple-deep: #52296f;
  --gold: #c8913a;
  --gold-soft: #e9c07a;
  --honey: #e7b45c;
  --dawn: radial-gradient(110% 90% at 88% 0%, #fdd9c4 0%, rgba(253, 217, 196, 0) 55%),
          linear-gradient(160deg, #fff3ea 0%, #f9e7ee 55%, #efe4f6 100%);
}

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

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

/* Heroes: sunrise instead of night sky */
:root[data-mode="dawn"] .hero, :root[data-mode="dawn"] .hero--page { background: var(--dawn); color: var(--ink); }
:root[data-mode="dawn"] .hero h1 { color: #2e1f3a; }
:root[data-mode="dawn"] .hero p { color: #5c4a63; }
:root[data-mode="dawn"] .hero .btn--ghost, :root[data-mode="dawn"] .section:not(.section--night) .btn--ghost { color: var(--purple); }
:root[data-mode="dawn"] .btn--ghost:hover { background: rgba(106, 61, 143, 0.07); }
:root[data-mode="dawn"] .btn--gold { background: var(--honey); color: #2e1f3a; }
:root[data-mode="dawn"] .btn--gold:hover { background: #f0c77d; color: #2e1f3a; }
:root[data-mode="dawn"] .crumbs, :root[data-mode="dawn"] .crumbs a { color: var(--ink-soft); }

/* The lotus artwork sits in a round frame with a warm glow */
:root[data-mode="dawn"] .hero-art { width: min(100%, 470px); }
:root[data-mode="dawn"] .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(170, 90, 70, 0.55), 0 0 90px rgba(253, 190, 150, 0.6);
}
@media (max-width: 760px) {
  :root[data-mode="dawn"] .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="dawn"] .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(170, 90, 70, 0.5);
}
:root[data-mode="dawn"] .hero--page .wrap > div { max-width: 40rem; }
@media (max-width: 960px) { :root[data-mode="dawn"] .hero--page::after { display: none; } }

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

/* Chakra slider: the light version, on a soft white sky */
:root[data-mode="dawn"] .chakra-art {
  background: radial-gradient(circle at 50% 38%, #ffffff 0%, #fdf6f3 55%, #f7eaf0 100%);
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 0 0 1px #efdcd8, 0 30px 60px -30px rgba(150, 80, 90, 0.3);
}
:root[data-mode="dawn"] .chakra-panel p { color: var(--ink-soft); }
:root[data-mode="dawn"] .chakra-num { color: #b07a26; }
:root[data-mode="dawn"] .chakra-meta { color: #8a5d1c !important; border-top-color: var(--line); }
:root[data-mode="dawn"] .chakra-slider .step { border-color: rgba(51, 36, 58, 0.25); color: var(--ink); }
:root[data-mode="dawn"] .chakra-slider .step:hover:not(:disabled) { border-color: var(--gold); color: #8a5d1c; }
:root[data-mode="dawn"] .chakra-ticks button { color: var(--ink-soft); }
:root[data-mode="dawn"] .chakra-ticks button[aria-current="true"] { background: var(--honey); color: #2e1f3a; }

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

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

/* Footer: light and warm */
:root[data-mode="dawn"] .site-footer { background: #f5e8ec; color: var(--ink-soft); }
:root[data-mode="dawn"] .site-footer a { color: var(--purple); }
:root[data-mode="dawn"] .site-footer h2 { color: #2e1f3a; }
:root[data-mode="dawn"] .footer-small { border-top-color: var(--line); }
:root[data-mode="dawn"] .footer-logo { box-shadow: 0 8px 24px -10px rgba(110, 70, 120, 0.45); }

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