/* Day/night theming for the Breathe section.
 *
 * Colour values are Lungy's own, lifted from the app's asset catalogue
 * (Lungy/Resources/Colours.xcassets/Version2Colours), so the web pages and the app agree.
 * Note the inversion in dark mode: the brand violet #573DFF is a *light* colour there
 * (#B2A6FF) sitting on a near-black navy, rather than a dark colour on lavender.
 */

:root,
[data-theme="day"] {
  --lungy-bg:            #E8E5FF;  /* background.primary */
  --lungy-bg-tint:       #DED9FF;  /* background.tint */
  --lungy-tile:          #F7F4FF;  /* main.tile */
  --lungy-primary:       #573DFF;  /* main.primary */
  --lungy-secondary:     #816BFF;  /* main.secondary */
  --lungy-accent:        #FFB39B;  /* main.accent */
  --lungy-cta-bg:        #573DFF;
  --lungy-cta-text:      #E8E5FF;  /* buttons.primary.text */
  --lungy-body:          rgba(87, 61, 255, .82);
  --lungy-muted:         rgba(87, 61, 255, .55);
  --lungy-hairline:      rgba(87, 61, 255, .12);
  --lungy-chip-bg:       #F7F4FF;
  --lungy-chip-border:   rgba(87, 61, 255, .25);
  --lungy-frame:         #131744;
  --lungy-icon-filter:   none;
}

[data-theme="night"] {
  --lungy-bg:            #000732;  /* background.primary (dark) */
  --lungy-bg-tint:       #24275B;  /* background.tint (dark) */
  --lungy-tile:          #121747;  /* main.tile (dark) */
  --lungy-primary:       #B2A6FF;  /* main.primary (dark) */
  --lungy-secondary:     #A294F8;  /* main.secondary (dark) */
  --lungy-accent:        #FF9979;  /* main.accent (dark) */
  --lungy-cta-bg:        #573DFF;  /* brand blue, identical in both themes */
  --lungy-cta-text:      #E8E5FF;
  --lungy-body:          rgba(178, 166, 255, .82);
  --lungy-muted:         rgba(178, 166, 255, .55);
  --lungy-hairline:      rgba(178, 166, 255, .16);
  --lungy-chip-bg:       #121747;
  --lungy-chip-border:   rgba(178, 166, 255, .3);
  --lungy-frame:         #000414;
  /* The pattern icons are flat SVGs drawn in the light-mode violets. Rather than ship a
     second set, lift them so they read against #000732; the app makes the same move by
     mapping main.primary to a lighter tone in dark mode. */
  --lungy-icon-filter:   brightness(1.45) saturate(.85);
}

html, body { background-color: var(--lungy-bg); }

/* Cross-fade rather than snapping between themes. Backgrounds and text only; transforms
   and opacity are left alone so hovers and the toggle hint keep their own timing. */
html, body, .navba, .footer, .module-cta,
.breathe-card, .breathe-card__art, .chip, .breathe-player__frame {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.navba .nav_label, .module-title, .chapter__title, .chapter__body p,
.breathe-card__title, .breathe-card__desc, .module-intro {
  transition: color .35s ease;
}
.navba .image-2, .pattern-icon, .breathe-card__art img, .breathe-back img {
  transition: filter .35s ease;
}
@media (prefers-reduced-motion: reduce) {
  html, body, .navba, .footer, .module-cta, .breathe-card, .breathe-card__art,
  .chip, .breathe-player__frame, .navba .nav_label, .navba .image-2 { transition: none; }
}

/* The shared navbar is built for light pages in lungy.webflow.css. */
[data-theme="night"] .navba { background-color: var(--lungy-bg) !important; }
[data-theme="night"] .navba .nav_label {
  color: var(--lungy-primary) !important;
  /* .nav_label multiplies against the page, which erases it on a near-black background. */
  mix-blend-mode: normal !important;
}
[data-theme="night"] .navba .nav_link.w--current .nav_label { color: #FFFFFF !important; }
/* The wordmark is a flat violet PNG with no dark variant; lift it to the dark-mode tone. */
[data-theme="night"] .navba .image-2 { filter: brightness(1.6) saturate(.75); }
/* Mobile drawer. The slide-out panel (.div-hide) is a warm off-white, and the menu
   itself (.tabs.w-nav-menu) sits over it with a translucent grey; both need the dark
   surface or the drawer stays a bright rectangle over a dark page. The hamburger bars
   are solid brand violet, which all but vanishes on #000732. */
[data-theme="night"] .div-hide { background-color: var(--lungy-bg) !important; }
[data-theme="night"] .tabs.w-nav-menu,
[data-theme="night"] .w-nav-menu { background-color: var(--lungy-bg) !important; }
[data-theme="night"] .div-hide .link.new { color: var(--lungy-primary) !important; }
[data-theme="night"] .div-hide .link.new.w--current { color: #FFFFFF !important; }
[data-theme="night"] .menu-open .line { background-color: var(--lungy-primary) !important; }
[data-theme="night"] .w-nav-overlay { background-color: transparent !important; }

/* The footer is already brand blue, so it stays put. */

/* Back button: the app ships both appearances, so swap the asset rather than filtering. */
.breathe-back .back-night { display: none; }
[data-theme="night"] .breathe-back .back-day   { display: none; }
[data-theme="night"] .breathe-back .back-night { display: block; }

/* ── Floating day/night toggle ──────────────────────────────────────────────
 * Fixed to the viewport so it travels with the reader rather than scrolling away.
 * Capsule grows to hold a label the first time, then settles to a circle.
 */
/* Collapsed it is a true circle: fixed 3rem square with the icon centred, and no
   horizontal padding to pull it off centre. Expanding on hover grows the capsule to the
   right of that circle, so the icon never moves. */
.theme-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 500;
  height: 3rem;
  width: 3rem;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: var(--lungy-tile);
  color: var(--lungy-primary);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .16);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  font-family: Rouna, sans-serif;
  font-size: .95rem;
  font-weight: 700;
  transition: width .42s cubic-bezier(.4, 0, .2, 1), background-color .35s ease, color .35s ease, transform .15s ease;
}
.theme-toggle:hover,
.theme-toggle:focus-visible { width: 9.5rem; transform: translateY(-2px); }

/* The icon keeps its own 3rem square at the left edge, so it stays dead centre of the
   circle whatever the button's width. */
.theme-toggle svg {
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  padding: .75rem;          /* 3rem box, 1.5rem glyph, centred */
  box-sizing: border-box;
  display: block;
}

/* Named on hover, so the collapsed state stays a clean circle. */
.theme-toggle__label {
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  /* Slower on the way out than in, so the capsule does not snap shut. */
  transition: opacity .34s cubic-bezier(.4, 0, .2, 1) .04s,
              transform .34s cubic-bezier(.4, 0, .2, 1) .04s;
  padding-right: 1.1rem;
}
.theme-toggle:hover .theme-toggle__label,
.theme-toggle:focus-visible .theme-toggle__label {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .22s cubic-bezier(.4, 0, .2, 1) .06s,
              transform .26s cubic-bezier(.4, 0, .2, 1) .06s;
}

/* Sun in night mode, moon in day mode: the icon shows what you would switch to. */
.theme-toggle .icon-sun  { display: none; }
[data-theme="night"] .theme-toggle .icon-sun  { display: block; }
[data-theme="night"] .theme-toggle .icon-moon { display: none; }

@media (max-width: 600px) {
  .theme-toggle { bottom: 1rem; right: 1rem; }
}