/* StreakSphere site-wide: dark (default) and light theme, the header theme switch, and shared
   accessibility rules. Loaded after each page's own styles. */

:root{
  --nav-bg:rgba(3,4,10,0.72);
  --body:#CBD5E1;
  --link:#A5B4FC;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#FFFFFF; --bg2:#F5F6FA;
  --surface:rgba(15,23,42,0.03); --surface2:rgba(15,23,42,0.06);
  --border:rgba(15,23,42,0.09); --border2:rgba(15,23,42,0.16);
  --text:#0F172A; --body:#334155; --muted:#5B6476; --link:#4338CA;
  --nav-bg:rgba(255,255,255,0.84);
  color-scheme:light;
}

nav{background:var(--nav-bg);}

/* Parts of the pages that were drawn for dark only */
:root[data-theme="light"] body::before{opacity:0;}
:root[data-theme="light"] .logo-img{border-color:rgba(15,23,42,0.12);}
:root[data-theme="light"] .apple-card-icon{background:rgba(15,23,42,0.05);}
:root[data-theme="light"] .social-icon:hover{background:rgba(15,23,42,0.08);}
:root[data-theme="light"] .faq-content{border-top-color:rgba(15,23,42,0.06);}
:root[data-theme="light"] .prose a{color:var(--link);}
:root[data-theme="light"] .callout.danger{background:rgba(220,38,38,0.05);border-color:rgba(220,38,38,0.35);}

/* Colours ease over when the theme changes (not on first load) */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{
  transition:background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease !important;
}

/* ---------- Header theme switch ---------- */
.theme-switch{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 6px 0 10px;border:0;border-radius:100px;background:transparent;color:var(--muted);font:500 .85rem 'DM Sans',system-ui,-apple-system,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.theme-switch:hover{color:var(--text);}
.theme-switch-track{position:relative;flex:none;width:48px;height:28px;border-radius:100px;background:rgba(99,102,241,0.32);border:1px solid rgba(165,180,252,0.45);transition:background-color .3s ease,border-color .3s ease;}
.theme-switch-thumb{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#1E1B4B;box-shadow:0 2px 6px rgba(0,0,0,0.35);display:grid;place-items:center;transform:translateX(20px);transition:transform .45s cubic-bezier(.34,1.56,.64,1),background-color .3s ease;}
.theme-switch svg{position:absolute;width:14px;height:14px;transition:opacity .25s ease,transform .5s cubic-bezier(.34,1.56,.64,1);}
.ts-moon{fill:#C7D2FE;opacity:1;transform:rotate(0deg) scale(1);}
.ts-sun{fill:none;stroke:#F59E0B;stroke-width:2.2;stroke-linecap:round;opacity:0;transform:rotate(-120deg) scale(.4);}
.ts-sun circle{fill:#F59E0B;stroke:none;}
:root[data-theme="light"] .theme-switch-track{background:#E2E8F0;border-color:rgba(15,23,42,0.14);}
:root[data-theme="light"] .theme-switch-thumb{background:#FFFFFF;box-shadow:0 2px 6px rgba(15,23,42,0.25);transform:translateX(0);}
:root[data-theme="light"] .ts-moon{opacity:0;transform:rotate(120deg) scale(.4);}
:root[data-theme="light"] .ts-sun{opacity:1;transform:rotate(0deg) scale(1);}
@media (max-width:640px){ .theme-switch-text{display:none;} .theme-switch{padding:0 6px;} }

/* ---------- Shared accessibility ---------- */
.nav-link{display:inline-flex;align-items:center;min-height:44px;}
.nav-cta{display:inline-flex;align-items:center;min-height:44px;}
.footer-col ul li{margin-bottom:0;}
.footer-col ul li a{display:inline-flex;align-items:center;min-height:44px;}
.social-icon{width:44px;height:44px;}
a:active{opacity:.7;}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:6px;}
@media (max-width:400px){ nav .nav-link{display:none;} }
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none !important;animation:none !important;}
}