/* ==========================================================================
   BEDÖ PILATES ACADEMY™ v2 — SELECTABLE THEMES
   Loaded AFTER tokens.css. Each block below re-points the same variable names
   tokens.css defines, so every component (buttons, cards, badges, progress,
   nav, modals) re-themes automatically — no component CSS changes needed.

   Five themes, chosen by the student from the palette button in the header:
     (no attribute) / "light" → Bone & Emerald ........ tokens.css :root
     data-theme="linen"       → Linen & Forest ........ below
     data-theme="greige"      → Greige & Brass ........ below
     data-theme="oxblood"     → Alabaster & Oxblood ... below
     data-theme="dark"        → Obsidian & Champagne .. tokens.css (unchanged,
                                so anyone already on dark mode keeps it)

   Specificity note: html[data-theme="x"] (0,1,1) beats :root (0,1,0), and this
   file loads second, so these win cleanly without !important.

   Contrast was measured, not eyeballed. Every theme clears WCAG AA for body
   text, secondary text, button labels and links; figures are on each block.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LINEN & FOREST — cooler paper, deeper forest green. The clinical one.
   body 12.0:1 (AAA) · muted 4.8:1 (AA) · white on green fill 6.4:1 (AA)
   · link 8.3:1 (AAA) · small gold 5.2:1 (AA)
   -------------------------------------------------------------------------- */
html[data-theme="linen"] {
  --bg: #F4F2EC;  --bg-rgb: 244,242,236;
  --surface: #FFFFFF;  --card: #FAF8F3;  --card2: #ECE9E0;
  --ink: #1C1F1B;  --text: #2B302A;  --text-muted: #666D63;  --text-dim: #949B90;
  --gold: #A8874E;  --gold-soft: #C7AC7C;  --gold-dim: #7E6132;
  --gold-bg: rgba(168,135,78,0.10);  --border-gold: rgba(168,135,78,0.35);
  --accent: #1F6B52;  --accent-hover: #175340;  --accent-ink: #17503D;
  --accent-soft: #63A38B;  --accent-bg: #E5EFEA;  --accent-border: rgba(31,107,82,0.35);
  --blue-ink: #3E5C77;  --blue-bg: #ECF2F8;  --blue-border: rgba(62,92,119,0.28);
  --border: #E3DFD3;
  --success: #1F6B52;  --warning: #B06A00;  --danger: #9B2C2C;
  --level-beginner: #1F6B52;  --level-intermediate: #B06A00;  --level-advanced: #9B2C2C;
  --shadow-sm: 0 1px 2px rgba(28,31,27,.05), 0 2px 8px rgba(28,31,27,.04);
  --shadow-md: 0 2px 6px rgba(28,31,27,.06), 0 10px 28px rgba(28,31,27,.07);
  --shadow-lg: 0 4px 12px rgba(28,31,27,.08), 0 18px 50px rgba(28,31,27,.12);
}

/* --------------------------------------------------------------------------
   GREIGE & BRASS — brass leads, slate blue takes the interactive role.
   Informational notices shift to green so they never read as clickable.
   body 12.6:1 (AAA) · muted 5.0:1 (AA) · white on slate fill 7.1:1 (AAA)
   · link 8.5:1 (AAA) · small gold 4.6:1 (AA)
   -------------------------------------------------------------------------- */
html[data-theme="greige"] {
  --bg: #F2F0EB;  --bg-rgb: 242,240,235;
  --surface: #FFFFFF;  --card: #F8F6F1;  --card2: #EAE6DD;
  --ink: #1F1D1A;  --text: #2C2A26;  --text-muted: #6B665E;  --text-dim: #98938A;
  --gold: #B08D57;  --gold-soft: #CBB182;  --gold-dim: #86663A;
  --gold-bg: rgba(176,141,87,0.12);  --border-gold: rgba(176,141,87,0.38);
  --accent: #3D5A80;  --accent-hover: #2F4666;  --accent-ink: #2E4661;
  --accent-soft: #7C9AC0;  --accent-bg: #EBF0F6;  --accent-border: rgba(61,90,128,0.35);
  --blue-ink: #4A6A55;  --blue-bg: #ECF2EE;  --blue-border: rgba(74,106,85,0.28);
  --border: #E2DDD2;
  --success: #276749;  --warning: #B06A00;  --danger: #9B2C2C;
  --level-beginner: #276749;  --level-intermediate: #B06A00;  --level-advanced: #9B2C2C;
  --shadow-sm: 0 1px 2px rgba(31,29,26,.05), 0 2px 8px rgba(31,29,26,.04);
  --shadow-md: 0 2px 6px rgba(31,29,26,.06), 0 10px 28px rgba(31,29,26,.07);
  --shadow-lg: 0 4px 12px rgba(31,29,26,.08), 0 18px 50px rgba(31,29,26,.12);
}

/* --------------------------------------------------------------------------
   ALABASTER & OXBLOOD — editorial and severe. Antique gold, deep oxblood.
   TRADEOFF: oxblood sits near the error red, so --danger is shifted brighter
   (#C0392B) and error states must carry an icon or the word "Error" as well
   as colour — never colour alone.
   body 14.1:1 (AAA) · muted 5.5:1 (AA) · white on oxblood fill 9.3:1 (AAA)
   · link 10.0:1 (AAA) · small gold 5.0:1 (AA)
   -------------------------------------------------------------------------- */
html[data-theme="oxblood"] {
  --bg: #F7F5F2;  --bg-rgb: 247,245,242;
  --surface: #FFFFFF;  --card: #FBFAF8;  --card2: #EFEBE4;
  --ink: #1A1614;  --text: #2A2422;  --text-muted: #6B615C;  --text-dim: #9A9089;
  --gold: #B5934F;  --gold-soft: #D0B57F;  --gold-dim: #82652F;
  --gold-bg: rgba(181,147,79,0.11);  --border-gold: rgba(181,147,79,0.36);
  --accent: #7A2E2E;  --accent-hover: #612424;  --accent-ink: #6B2626;
  --accent-soft: #A65B5B;  --accent-bg: #F3E9E7;  --accent-border: rgba(122,46,46,0.32);
  --blue-ink: #3E5C77;  --blue-bg: #ECF2F8;  --blue-border: rgba(62,92,119,0.28);
  --border: #E6E1DA;
  --success: #276749;  --warning: #B06A00;  --danger: #C0392B;
  --level-beginner: #276749;  --level-intermediate: #B06A00;  --level-advanced: #7A2E2E;
  --shadow-sm: 0 1px 2px rgba(26,22,20,.05), 0 2px 8px rgba(26,22,20,.04);
  --shadow-md: 0 2px 6px rgba(26,22,20,.06), 0 10px 28px rgba(26,22,20,.07);
  --shadow-lg: 0 4px 12px rgba(26,22,20,.08), 0 18px 50px rgba(26,22,20,.12);
}

/* --------------------------------------------------------------------------
   Small correction that applies to every LIGHT theme, including the default:
   #8A6D3B gold text on cream measures 4.42:1 — just under the 4.5:1 AA floor
   the tokens.css comment claims. Nudged to #826636 (4.9:1). Dark themes are
   unaffected; their gold text already measures 11.2:1.
   -------------------------------------------------------------------------- */
html:not([data-theme="dark"]) { --gold-dim: #826636; }
html[data-theme="linen"]   { --gold-dim: #7E6132; }
html[data-theme="greige"]  { --gold-dim: #86663A; }
html[data-theme="oxblood"] { --gold-dim: #82652F; }

/* --------------------------------------------------------------------------
   THEME PICKER — the header control itself. Deliberately theme-agnostic: it
   uses the same variables as everything else, so it restyles along with the
   rest of the portal the instant a theme is chosen.
   -------------------------------------------------------------------------- */
/* The trigger. Its three swatches are painted from the live theme variables,
   so the button always previews whichever palette is currently active. */
.theme-pick-btn {
  display: inline-flex; align-items: center; gap: .3rem; flex: none;
  height: 27px; padding: 0 .3rem 0 .32rem;
  background: var(--card2); border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-muted); cursor: pointer;
}
.theme-pick-btn:hover { border-color: var(--border-gold); }
.theme-pick-btn .tpb-sw { display: inline-flex; border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.theme-pick-btn .tpb-sw i { display: block; width: 9px; height: 17px; }
.theme-pick-btn .tpb-sw i:nth-child(1) { background: var(--bg); }
.theme-pick-btn .tpb-sw i:nth-child(2) { background: var(--accent); }
.theme-pick-btn .tpb-sw i:nth-child(3) { background: var(--gold); }
.theme-pick-btn .tpb-caret { width: 12px; height: 12px; }
.theme-pick-btn[aria-expanded="true"] .tpb-caret { transform: rotate(180deg); }

.theme-menu-wrap { position: relative; display: inline-flex; }
.theme-menu {
  position: absolute; top: calc(100% + .45rem); right: 0; z-index: 200;
  min-width: 232px; padding: .35rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
}
.theme-menu[hidden] { display: none; }
.theme-menu-label {
  padding: .35rem .55rem .3rem; font-size: .62rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim);
}
.theme-opt {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .45rem .55rem; border: 0; border-radius: 7px;
  background: transparent; color: var(--text); font: inherit; font-size: .85rem;
  text-align: left; cursor: pointer;
}
.theme-opt:hover, .theme-opt:focus-visible { background: var(--card2); outline: none; }
.theme-opt[aria-checked="true"] { font-weight: 600; }
.theme-opt[aria-checked="true"] .theme-tick { opacity: 1; }
.theme-tick { margin-left: auto; opacity: 0; color: var(--accent-ink); font-size: .9rem; }
.theme-sw { display: inline-flex; flex: none; border-radius: 5px; overflow: hidden; border: 1px solid var(--border); }
.theme-sw i { display: block; width: 13px; height: 20px; }
@media (prefers-reduced-motion: no-preference) {
  html.theme-transitioning, html.theme-transitioning * {
    transition: background-color .34s var(--ease-out), border-color .34s var(--ease-out), color .34s var(--ease-out) !important;
  }
}