/* Cogio 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))}

/* the Cogio logo: each page carries both kit files and shows the one for the current theme
   (navy letters on light, light letters on dark). !important beats each page's .brand .logo{display:block}. */
html:not([data-theme="dark"]) .logo-dark,html[data-theme="dark"] .logo-light{display:none!important}

/* 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 centred between it and the toggle in the right corner (every page shares this nav).
   The logo keeps its full 104px (the kit's minimum is 80px), so the side columns are sized to their contents
   rather than equal; the button centres in the space left over.
   "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:auto 1fr auto;align-items:center;column-gap:10px}
  nav .nav-in>.brand{grid-column:1;grid-row:1;justify-self:start}
  nav .nav-in .nav-cta{display:contents}
  nav .nav-in .nav-cta .btn{grid-column:2;grid-row:1;justify-self:center;white-space:nowrap}
  nav .nav-in .theme-toggle{grid-column:3;grid-row:1;justify-self:end}
}
@media(max-width:360px){nav .nav-in .nav-cta .btn{padding-left:12px;padding-right:12px}}

/* 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}
}