/* theme.css — the site's two looks: dark (default) and light.
   Each page keeps its own base styles; this file only recolours them.
   The visitor switches with the ☀ / ☾ button in the top menu (see theme.js). */
/* ── both new looks: stronger menus and text ── */
html[data-theme="dark"] body, html[data-theme="light"] body{font-weight:400}
html[data-theme="dark"] .nav-links a, html[data-theme="light"] .nav-links a{font-size:.8rem;letter-spacing:.14em;font-weight:500;color:var(--ink)}
html[data-theme="dark"] .nav-links a:hover, html[data-theme="light"] .nav-links a:hover{color:var(--accent)}
html[data-theme="dark"] .section-head .sub, html[data-theme="light"] .section-head .sub{color:var(--ink-soft)}
html[data-theme="dark"] .track .tag, html[data-theme="light"] .track .tag{color:var(--ink-soft)}
html[data-theme="dark"] .eyebrow, html[data-theme="light"] .eyebrow{color:var(--accent);font-weight:500}
/* A · dark */
html[data-theme="dark"]{--bg:#141017;--surface:#1E1822;--white:#1E1822;--nav:rgba(18,14,21,.94);--ink:#F3EDF4;--ink-soft:#CBBFCE;--muted:#998D9F;--line:#2E2634;--lilac:#3B3141;--accent:#E37A41;--sky-top:#141017;--sky-mid:#141017;--sky-low:#1E1822;--peach:#1E1822;--peach-deep:#241D29}
html[data-theme="dark"] .hero::before{background:linear-gradient(90deg,rgba(18,14,21,.82) 0%,rgba(18,14,21,.5) 45%,rgba(18,14,21,0) 78%),linear-gradient(0deg,rgba(20,16,23,1) 0%,rgba(20,16,23,0) 22%)}
html[data-theme="dark"] .hero-content .tagline{opacity:.92}
html[data-theme="dark"] #milestones, html[data-theme="dark"] #licensing{background:var(--bg)}
html[data-theme="dark"] .btn:hover, html[data-theme="dark"] .btn:focus{color:#141017}
html[data-theme="dark"] .btn-accent:hover{background:#C9622D;border-color:#C9622D;color:#fff}
html[data-theme="dark"] .btn-ghost{border-color:#5A4E60;color:var(--ink)}
html[data-theme="dark"] .track .cover{box-shadow:0 18px 40px -22px rgba(0,0,0,.9)}
/* B · light, clean */
html[data-theme="light"]{--bg:#F8F5F9;--surface:#FFFFFF;--white:#FFFFFF;--nav:#1F1923;--ink:#1D1920;--ink-soft:#4B4250;--muted:#83788A;--line:#E3DBE5;--lilac:#D9CEDC;--accent:#C2582A;--sky-top:#F8F5F9;--sky-mid:#F8F5F9;--sky-low:#F1ECF2;--peach:#F1ECF2;--peach-deep:#EAE3EC}
html[data-theme="light"] nav .wordmark, html[data-theme="light"] .nav-links a{color:#F3EDF4}
html[data-theme="light"] .nav-links a:hover{color:#F0A27A}
html[data-theme="light"] .nav-toggle span{background:#F3EDF4}
html[data-theme="light"] nav{border-bottom-color:#1F1923}
html[data-theme="light"] .hero::before{background:linear-gradient(90deg,rgba(248,245,249,.86) 0%,rgba(248,245,249,.55) 45%,rgba(248,245,249,0) 78%)}
html[data-theme="light"] #milestones, html[data-theme="light"] #licensing{background:var(--bg)}
html[data-theme="light"] footer{color:#E9E1EB} html[data-theme="light"] footer *{border-color:#3A3240} html[data-theme="light"] footer a, html[data-theme="light"] footer .made, html[data-theme="light"] footer span{color:#CFC4D2}
html[data-theme="light"] .track .cover{box-shadow:0 14px 30px -20px rgba(40,20,50,.45)}
/* hero "About me": visible on the photo */
html[data-theme="dark"] .hero .btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6);color:#fff;font-weight:600;backdrop-filter:blur(4px)}
html[data-theme="dark"] .hero .btn-ghost:hover{background:#fff;color:#141017;border-color:#fff}
html[data-theme="light"] .hero .btn-ghost{background:rgba(255,255,255,.55);border-color:var(--ink);color:var(--ink);font-weight:600;backdrop-filter:blur(4px)}
html[data-theme="light"] .hero .btn-ghost:hover{background:var(--ink);color:#fff}

/* "Most chosen": clearly the recommended plan */
html[data-theme="dark"] .plan.featured, html[data-theme="light"] .plan.featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 26px 50px -32px rgba(227,122,65,.65);transform:translateY(-8px)}
html[data-theme="dark"] .plan .badge, html[data-theme="light"] .plan .badge{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;padding:5px 10px}

/* theme switch in the top menu */
.theme-btn{background:none;border:1px solid var(--line);color:var(--ink);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:.95rem;display:inline-flex;align-items:center;justify-content:center;margin-left:6px}
.theme-btn:hover{border-color:var(--accent);color:var(--accent)}
html[data-theme="light"] .theme-btn{color:#F3EDF4;border-color:#4A4050}
.nav-inner{gap:14px}

/* track page: no plan looks "already selected"; Business is the highlighted one, like on the home page */
html[data-theme="dark"] .tl-tier.top, html[data-theme="light"] .tl-tier.top{background:var(--surface);border:1px solid var(--accent);box-shadow:0 0 0 1px var(--accent)}
html[data-theme="dark"] .tl-tier.top .btn-t, html[data-theme="light"] .tl-tier.top .btn-t{background:none;color:var(--ink)}
html[data-theme="dark"] .tl-tier.top .btn-t:hover, html[data-theme="light"] .tl-tier.top .btn-t:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tl-badge{align-self:flex-start;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;background:var(--accent);color:#fff;padding:5px 10px}
html[data-theme="dark"] .tl-tier, html[data-theme="light"] .tl-tier{background:var(--surface)}

/* no plan button looks pre-selected: all outlined, they fill only on hover */
html[data-theme="dark"] .plan[data-plan="extended"] .plan-choose, html[data-theme="light"] .plan[data-plan="extended"] .plan-choose{background:none;color:var(--ink)}
html[data-theme="dark"] .plan .plan-choose:hover, html[data-theme="light"] .plan .plan-choose:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.nav-inner > *{order:2}.nav-inner .wordmark{order:1}.nav-inner .nav-links{margin-left:auto}.nav-inner .theme-btn{order:3}.nav-inner .nav-toggle{order:4}
@media(max-width:900px){.nav-inner .theme-btn{margin-left:auto;margin-right:8px}}

/* footer: name always visible, links without underline, Instagram link readable */
html[data-theme="light"] .footer-brand .wordmark{color:#F3EDF4}
html[data-theme="dark"] .f-links a, html[data-theme="light"] .f-links a{text-decoration:none;color:var(--ink)}
html[data-theme="light"] .f-links a{color:#E9E1EB}
html[data-theme="dark"] .f-links a:hover, html[data-theme="light"] .f-links a:hover{color:var(--accent)}
html[data-theme="dark"] .f-bottom .sig a, html[data-theme="light"] .f-bottom .sig a{color:var(--ink);font-weight:600;border-bottom:0}
html[data-theme="light"] .f-bottom .sig a{color:#F3EDF4}
html[data-theme="dark"] .f-bottom .sig a:hover, html[data-theme="light"] .f-bottom .sig a:hover{color:var(--accent)}
html[data-theme="dark"] .footer-brand .made, html[data-theme="light"] .footer-brand .made{color:var(--ink-soft)}
html[data-theme="light"] .footer-brand .made{color:#CFC4D2}

/* pop-ups and banners made by the scripts (newsletter, store, cookies) follow the theme */
html[data-theme="dark"] #storeModal .sm-money, html[data-theme="dark"] #storeModal .sm-quick button,
html[data-theme="dark"] #storeModal input.sm-in, html[data-theme="dark"] #storeModal .sm-sum{background:var(--bg);color:var(--ink)}
/* store buttons: light fill needs dark text in the dark theme */
html[data-theme="dark"] .os-btn.dark{background:var(--ink);border-color:var(--ink);color:var(--bg)}
html[data-theme="dark"] .os-btn.dark:hover{background:var(--accent);border-color:var(--accent);color:#fff}
html[data-theme="dark"] #oraConsent{background:var(--surface)!important;border-color:var(--line)!important;color:var(--ink)!important}
html[data-theme="dark"] #oraConsent .oc-body a{color:var(--ink)!important}
html[data-theme="dark"] #oraConsent .oc-yes{background:var(--ink)!important;color:var(--bg)!important}
html[data-theme="dark"] #oraConsent .oc-no{border-color:var(--line)!important;color:var(--ink)!important}
html[data-theme="dark"] #oraConsent .oc-no:hover{border-color:var(--ink)!important}

/* small fixes for colours that were written straight into some pages */
html[data-theme] .tl-license p{color:var(--ink-soft)}
html[data-theme] .btn-dl:hover, html[data-theme] .btn-track-dl:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
html[data-theme] .terms input{accent-color:var(--accent)}
/* collection page: no plan looks pre-selected either */
html[data-theme] .cp-tier.top{background:var(--surface);border:1px solid var(--accent);box-shadow:0 0 0 1px var(--accent)}
html[data-theme] .cp-tier.top .btn-t{background:none;color:var(--ink)}
html[data-theme] .cp-tier.top .btn-t:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
html[data-theme] .tl-tier.top .btn-t:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* footers on every page sit on the menu colour */
html[data-theme] footer{background:var(--nav)}
html[data-theme="dark"] footer{background:#0F0C12}
/* recover page (older layout) */
html[data-theme] .pg-recover{background:var(--bg)}
html[data-theme] .pg-recover nav{background:var(--nav)}
html[data-theme="light"] .pg-recover nav a, html[data-theme="light"] .pg-recover nav .wordmark{color:#F3EDF4}
html[data-theme] .pg-recover .result{background:var(--surface)}

/* simple pages (terms, privacy, recover, 404): same dark menu bar in the light look */
html[data-theme="light"] nav{background:var(--nav);border-bottom-color:var(--nav)}
html[data-theme="light"] nav a, html[data-theme="light"] nav .wordmark{color:#F3EDF4}
html[data-theme] .mark{color:var(--ink);text-decoration:none}
.nav-inner > a:not(.wordmark){margin-left:auto}