/* Mathslive.ie — cream/black for the ORDINARY topic hubs
 * PLACE AT:  /hub-theme.css  (site root)
 *
 * The fifteen Higher hubs carry this inline, because they were done one by one
 * and each already had the tokens. The thirteen Ordinary hubs get it as one
 * shared file instead: same result, one place to change it, and thirteen files
 * that stay as they were apart from two lines in the head.
 *
 * MUST BE LINKED LAST, after the page's own <style>, because a few of the
 * overrides below beat plain class selectors the pages declare.
 *
 * Every rule is scoped to [data-theme="light"]. With no attribute set, or
 * data-theme="dark", nothing here applies and the page is exactly as it was.
 */

:root[data-theme="light"]{
  /* CREAM — the variable NAMES are the ones the pages already use, so every
     existing rule works unchanged: --charcoal is the page, --cream is the ink. */
  color-scheme:light;
  --charcoal:#F7F4EC; --charcoal-deep:#FFFFFF; --charcoal-soft:#EFEADE;
  --cream:#141614; --cream-muted:rgba(20,22,20,0.76); --cream-quiet:rgba(20,22,20,0.56);
  --electric:#00713A; --electric-soft:#0E9150;
  --rule:rgba(20,22,20,0.14); --rule-strong:rgba(20,22,20,0.26);
  --gold:#7A5F26;
  /* the pyramid: warm stone for a step not taken, green for one that is */
  --tier-face:#E4DECE; --tier-ring:#C3BBA6;
  --g1:#B7E6CC; --g2:#8FD9B0; --g3:#63C892; --g4:#3AB776; --g5:#17A15E;
}
:root[data-theme="dark"]{ color-scheme:dark; }

/* ── the cream-on-dark literals these pages hardcode ─────────────────────── */
/* Several of the page's own rules carry !important (the "ml-pyr-fix" block),
   so the overrides that collide with them must too. Where there is no clash,
   plain specificity is enough and !important is left off deliberately. */
:root[data-theme="light"] .nav-wrap{background:rgba(247,244,236,.90)}
:root[data-theme="light"] .topic-head::after{background:radial-gradient(circle,rgba(0,113,58,.05),transparent 62%)}
:root[data-theme="light"] .tface{background:var(--tier-face)!important}
:root[data-theme="light"] .tier,
:root[data-theme="light"] .tier-shell{background:var(--tier-ring)}
:root[data-theme="light"] .tier.expandable{background:transparent!important}
:root[data-theme="light"] .pyramid .tier:not(.tier-done):not(.soon){background:var(--tier-ring)!important}
:root[data-theme="light"] .pyramid .tier.expandable:not(.tier-done):not(.soon){background:transparent!important}
:root[data-theme="light"] .pyramid .tier.expandable:not(.tier-done):not(.soon) .tier-shell{background:var(--tier-ring)!important}
:root[data-theme="light"] .pyramid .tier.expandable .tier-body{background:transparent!important}
/* the climb — these pages hardcode the greens rather than using tokens */
:root[data-theme="light"] .pyramid .tier.tier-done{--g:var(--g1)!important;background:var(--g)!important}
:root[data-theme="light"] .pyramid .tier.tier-done.d2{--g:var(--g2)!important}
:root[data-theme="light"] .pyramid .tier.tier-done.d3{--g:var(--g3)!important}
:root[data-theme="light"] .pyramid .tier.tier-done.d4{--g:var(--g4)!important}
:root[data-theme="light"] .pyramid .tier.tier-done.d5{--g:var(--g5)!important}
:root[data-theme="light"] .pyramid .tier.expandable.tier-done{background:transparent!important}
:root[data-theme="light"] .pyramid .tier.expandable.tier-done .tier-shell{background:var(--g)!important}
:root[data-theme="light"] .pyramid.climb-complete .tier{background:var(--gold)!important}
:root[data-theme="light"] .pyramid.climb-complete .tier.expandable{background:transparent!important}
:root[data-theme="light"] .pyramid.climb-complete .tier.expandable .tier-shell{background:var(--gold)!important}

/* ── black writing on every step, which is what caps the greens ──────────── */
:root[data-theme="light"] .pyramid .tname{color:#0A0A0A;font-weight:600}
:root[data-theme="light"] .pyramid .tdesc{color:rgba(10,10,10,.74)}
:root[data-theme="light"] .pyramid .tnum{color:#00713A}
:root[data-theme="light"] .pyramid .chev{color:#0A0A0A}
:root[data-theme="light"] .pyramid .tier.soon{opacity:.5}
:root[data-theme="light"] .pyramid .cls-row .rate{accent-color:var(--electric)!important}
:root[data-theme="light"] .pyramid .cls-row .rv{background:rgba(20,22,20,.07);color:rgba(20,22,20,.62)}
/* These pages still carry `height:56px!important` with no vertical padding,
   which clips "One page. Print and keep." at narrow widths. Same fix the
   Higher hubs got, but it has to shout to be heard over the original. */
:root[data-theme="light"] .tface{min-height:56px!important;height:auto!important;padding:11px 22px!important}
@media(max-width:560px){:root[data-theme="light"] .tface{padding:11px 18px!important}}
/* The watermark/lit rule forces black text on a lit tier, which is what the
   cream greens are chosen for. Nothing to override — noted so it isn't
   "tidied" later: .pyramid .tier.lit … {color:#0A0A0A!important} */

/* ── the toggle itself ───────────────────────────────────────────────────── */
.theme-btn{display:inline-flex;align-items:center;gap:.45rem;background:transparent;
  border:1px solid var(--rule-strong);color:var(--cream-muted);
  font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.62rem .75rem;cursor:pointer;flex-shrink:0;
  white-space:nowrap;transition:color .2s,border-color .2s}
.theme-btn:hover{color:var(--cream);border-color:var(--cream)}
.theme-btn i{width:9px;height:9px;border-radius:50%;background:var(--cream);
  border:1px solid var(--rule-strong);display:inline-block}
@media(max-width:420px){.theme-btn span{display:none}.theme-btn{padding:.62rem .6rem}}