/* ui-light/variants.css — the breathing design (呼吸), the look of the light interface.
   Builds on the Recharge tokens in themes.css; selected by <html data-style="recharge-breath">. */

/* =====================================================================================
   呼吸 / breath  (default)
   Fresh and airy in the brand blue: a sky-white ground, white surfaces with soft rounded
   corners, pill buttons. The recording page centres on a breathing circle: the outer ring is
   the progress, inside it a soft blue circle breathes slowly while silent and ripples with
   the voice (app.js scales .pulse from the live level).
   ===================================================================================== */
:root[data-style="recharge-breath"] {
  --bg: #f4fafd;
  --surface: #ffffff;
  --surface-2: #eaf5fb;
  --line: #ccdbe6;                    /* panel edges, now without shadows */
  --accent-soft: #dff2fb;
  --radius: 999px;            /* pill buttons */
  --radius-panel: 22px;
  --radius-sheet: 26px;
}
:root[data-style="recharge-breath"] .choices,
:root[data-style="recharge-breath"] .script,
:root[data-style="recharge-breath"] .checks {
  border: 1px solid var(--line);   /* a thin edge, no coloured shadow */
  box-shadow: none;
}
:root[data-style="recharge-breath"] .toggle,
:root[data-style="recharge-breath"] .banner {
  border-radius: 999px;
}
:root[data-style="recharge-breath"] .step-screen h1 {
  font-weight: 650;
  letter-spacing: 0.01em;
}

/* the circle: bigger, a thin progress ring, the wave inside it */
:root[data-style="recharge-breath"] .meter {
  padding-block: 18px 0;
}
:root[data-style="recharge-breath"] .orb {
  width: 184px;
  height: 184px;
}
:root[data-style="recharge-breath"] .ring-track {
  stroke: #e3eff6;
  stroke-width: 5;
}
:root[data-style="recharge-breath"] .ring-value {
  stroke: var(--brand-blue);
  stroke-width: 5;
}
/* the pumping circle (app.js scales it with the voice) */
.pulse {
  display: none;
}
:root[data-style="recharge-breath"] .pulse {
  display: block;
  position: absolute;
  inset: 0;
}
:root[data-style="recharge-breath"] .pulse i {
  position: absolute;
  left: 16.67%;
  top: 16.67%;
  width: 66.67%;
  height: 66.67%;
  border-radius: 50%;
  will-change: transform;
  transition: background-color 400ms var(--ease), border-color 400ms var(--ease);
}
:root[data-style="recharge-breath"] .pulse-halo {
  background: #bfe6f7;
  opacity: 0;
}
:root[data-style="recharge-breath"] .pulse-core {
  background: #dff2fb;
  border: 1.5px solid rgb(19 154 208 / 0.5);
}
/* while recording the circle is a little bluer; green when complete */
:root[data-style="recharge-breath"] body:has(.rec-dot.on) .pulse-core {
  background: #cdeaf8;
  border-color: var(--brand-blue);
}
:root[data-style="recharge-breath"] .orb.done .pulse-core {
  background: #e3f6ed;
  border-color: var(--success);
}
:root[data-style="recharge-breath"] .orb.done .pulse-halo {
  background: #cdeedc;
}
:root[data-style="recharge-breath"] .ring-center {
  z-index: 1;
}
:root[data-style="recharge-breath"] .ring-pct {
  font-size: 2.5rem;
}
:root[data-style="recharge-breath"] .ring-label {
  margin-top: 4px;
}