/* Cerbio site theme: dark mode + the header toggle. Shared by every page (Brief AS follow-up).
   Light stays the default and lives in each page's own :root; this file only overrides it when
   <html data-theme="dark">, which /assets/theme.js sets from the visitor's saved choice.
   Dark values mirror the app's dark tokens (tokens/tokens.json) — keep in sync. */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E0E12; --bg-raised:#17171D; --line:#2A2A33; --divider:#1F1F27;
  --text:#F2F2F5; --text-2:#B5B5BD; --muted:#9A9AA4;
  --accent:#7F77DD; --accent-text:#A9A3FF;
  --success:#1D9E75; --success-text:#5DCAA5;
  --danger:#E0605E; --danger-text:#FFB9B7;
}

/* shared pieces with light-only colours */
html[data-theme="dark"] nav{background:rgba(14,14,18,.8)}
html[data-theme="dark"] ::selection{background:rgba(127,119,221,.4);color:var(--text)}
html[data-theme="dark"] .btn-dark{background:var(--text);color:var(--bg)}
html[data-theme="dark"] .btn-dark:hover{background:#DCDCE2}
html[data-theme="dark"] .rive-slot::before{background:radial-gradient(closest-side,rgba(127,119,221,.18),rgba(127,119,221,.07) 60%,rgba(127,119,221,0))}

/* home: try-one gate card in the app's dark gate colours */
html[data-theme="dark"] .gate-card{--bg-raised:#1F1F27;--line:#2E2E38;--g-tint:#2C2850;background:#17171D;border-color:#2A2A33;box-shadow:0 24px 50px -30px rgba(0,0,0,.65)}
html[data-theme="dark"] .gate-icon{background:rgba(127,119,221,.2)}
html[data-theme="dark"] .kg .cell{stroke:#17171D}
html[data-theme="dark"] .tile.is-wrong{background:rgba(224,96,94,.16)}
html[data-theme="dark"] .tile.glyph.is-correct{background:rgba(29,158,117,.16)}

/* blog (blog/blog.css): tint, shadows and the few light-only colours */
html[data-theme="dark"] .blog{--blog-tint:#24203F;--blog-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.6);--blog-shadow-hover:0 2px 4px rgba(0,0,0,.35),0 18px 40px -16px rgba(0,0,0,.75)}
html[data-theme="dark"] .post-body blockquote{color:var(--text)}
html[data-theme="dark"] .post-body a{text-decoration-color:rgba(169,163,255,.45)}
html[data-theme="dark"] .post-card:nth-child(4n+3)::before{background:#C9C4FF}
html[data-theme="dark"] .blog-topic:hover{background:rgba(255,255,255,.04)}
html[data-theme="dark"] .post-tag{background:rgba(127,119,221,.16)}

/* the header toggle: moon in light (switches to dark), sun in dark */
.theme-toggle{display:inline-grid;place-items:center;flex:0 0 auto;width:40px;height:40px;padding:0;border-radius:50%;border:1.5px solid var(--line);background:transparent;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:border-color var(--t-fast,180ms) var(--ease,ease),transform var(--t-fast,180ms) var(--ease,ease)}
.theme-toggle:active{transform:scale(.94);transition-duration:var(--t-instant,100ms)}
@media(hover:hover) and (pointer:fine){.theme-toggle:hover{border-color:var(--accent)}}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun,html[data-theme="dark"] .theme-toggle .i-moon{display:none}
html[data-theme="dark"] .theme-toggle .i-sun{display:block}
html:not([data-theme]) .theme-toggle{display:none} /* no JS: no toggle */
@media(max-width:560px){.theme-toggle{width:36px;height:36px}}

/* phones: logo left, Get Started dead centre, toggle in the right corner (every page shares this nav).
   Equal side columns keep the button centred; the wordmark shrinks a little to fit its column.
   "nav " prefixes: this file loads before each page's own <style>, so these need the extra specificity. */
@media(max-width:560px){
  nav .nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:10px}
  nav .nav-in>.brand{grid-column:1;grid-row:1;justify-self:start;min-width:0;max-width:100%}
  nav .nav-in .brand .wm{flex:0 1 auto;min-width:0;max-width:100%}
  /* Wordmark parity with the old COGNITTA mark (870.74 x 102 box, 96px wide), which shrank to fit this column
     together with the 32px mascot, in proportion to their widths (96:32 across the 137px they plus the 9px gap
     needed): its width was min(96px, 0.75 x column - 6.75px). CERBIO takes the height that width gave, so the
     cap height matches at every phone width. Without container queries the page's 11.25px applies. */
  nav .nav-in>.brand{justify-self:stretch;container-type:inline-size}
  nav .nav-in .brand .wm{height:calc(min(96px, 75cqw - 6.75px) * 102 / 870.74)}
  nav .nav-in .nav-cta{display:contents}
  nav .nav-in .nav-cta .btn{grid-column:2;grid-row:1}
  nav .nav-in .theme-toggle{grid-column:3;grid-row:1;justify-self:end}
}

/* a short crossfade while switching (not on load, not under reduced motion) */
@media(prefers-reduced-motion:no-preference){
  html.theme-switching,html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after{
    transition:background-color 260ms cubic-bezier(.22,1,.36,1),color 260ms cubic-bezier(.22,1,.36,1),border-color 260ms cubic-bezier(.22,1,.36,1),fill 260ms cubic-bezier(.22,1,.36,1),stroke 260ms cubic-bezier(.22,1,.36,1)!important}
}