/* ui-light/themes.css — the Recharge brand colours of the light interface: navy for text and the
   main action, brand blue for progress and marks, logo pink for the recording dot, the landing
   page's sky-white ground. Applied with <html data-style="recharge-breath"> (the breathing design in
   variants.css builds on these tokens). */

/* ---------- Recharge (品牌): the colours of the logo and wellbeing.mindtherapys.com ---------- */
/* Default look. Navy for text and the main action, brand blue for progress and marks,
   logo pink for the recording dot, the landing page's sky-white ground and borders. */
:root[data-style^="recharge"] {
  --bg: #f7fbfd;
  --surface: #ffffff;
  --surface-2: #eef4f8;
  --line: #dce4ed;
  --ink: #202c48;
  --ink-2: #50607a;
  --ink-3: #5a687e;                        /* small grey text: about 5:1 on the ground */
  --line-strong: #7b8da3;                  /* edges of controls: about 3:1 */
  --accent: #202c48;                       /* main buttons, like "Start your journey" */
  --accent-hover: #2b3a5e;
  --accent-soft: #e0f4ff;
  --on-accent: #ffffff;
  --brand-blue: #139ad0;
  --focus: #139ad0;
  --recording: #fc7e9e;
  --success: #207653;
  --success-soft: #e3f6ed;
  --radius: 10px;                          /* the landing page's button radius */
  --radius-panel: 16px;
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC",
    "Microsoft YaHei", Arial, sans-serif;
}
:root[data-style^="recharge"] .ring-value {
  stroke: var(--brand-blue);
}
:root[data-style^="recharge"] .orb.done .ring-value {
  stroke: var(--success);
}
:root[data-style^="recharge"] .flow-n {
  background: var(--accent-soft);
  color: #126d94;
}
:root[data-style^="recharge"] .text-btn,
:root[data-style^="recharge"] .consent a {
  color: #126d94;                          /* brand blue, darkened for small text (AA) */
}
:root[data-style^="recharge"] {
  --notice-bg: #e0f4ff;                    /* reminders: brand blue tint */
  --notice-ink: #126d94;
  --success-soft: #e3f6ed;
}
:root[data-style^="recharge"] .link-btn {
  color: #126d94;
}
:root[data-style^="recharge"] input[type="range"] {
  background: linear-gradient(to right, var(--brand-blue) var(--fill, 0%), var(--surface-2) var(--fill, 0%));
}
:root[data-style^="recharge"] input[type="range"]::-webkit-slider-thumb {
  border-color: var(--brand-blue);
}
:root[data-style^="recharge"] .bar > i {
  background: var(--brand-blue);
}
:root[data-style^="recharge"] .spinner {
  border-color: var(--accent-soft);
  border-top-color: var(--brand-blue);
}
:root[data-style^="recharge"] .countdown-num {
  color: var(--brand-blue);
}