/* shared light / dark theme — loaded after each page's inline styles */
.theme-toggle{width:36px;height:36px;border-radius:50%;border:1.5px solid currentColor;background:transparent;
  color:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;padding:0;opacity:.85;transition:opacity .2s,background .2s}
.theme-toggle:hover{opacity:1;background:rgba(127,127,127,.15)}
.theme-toggle.floating{position:fixed;top:14px;right:14px;z-index:95}

/* ═══════════ LIGHT  (the pastel brand look) ═══════════ */
html[data-theme="light"]{
  --paper:#FAFAF4; --paper-2:#EAF5F1; --line:#D6E5E0; --muted:#5E7471;
  color-scheme:light;
}
html[data-theme="light"] img[src$="logo-croc.png"]{content:url(/img/logo-croc-dark.png)}

html[data-theme="light"] .hero,
html[data-theme="light"] .chero{
  color:var(--deep);
  background:
    radial-gradient(56vw 64% at -4% -12%,#F8E7BC 40%,transparent 68%),
    radial-gradient(42vw 80% at 106% 14%,#CDEBE3 42%,transparent 68%),
    radial-gradient(50vw 68% at -8% 114%,#CDEBE3 40%,transparent 66%),
    radial-gradient(32vw 54% at 104% 110%,#F8E7BC 40%,transparent 66%),
    linear-gradient(180deg,#FAF9F2,#F1F7F3);
}
html[data-theme="light"] .hero::after,
html[data-theme="light"] .chero::after{display:none}
html[data-theme="light"] .hero h1,
html[data-theme="light"] .chero h1,
html[data-theme="light"] .on-dark .h-xl,
html[data-theme="light"] .on-dark .h-lg,
html[data-theme="light"] .on-dark h2,
html[data-theme="light"] .on-dark h3,
html[data-theme="light"] .on-dark h4,
html[data-theme="light"] .sec-dark h2,
html[data-theme="light"] .sec-dark h3,
html[data-theme="light"] .sec-dark h4{color:var(--deep)}
html[data-theme="light"] .hero h1 .gold,
html[data-theme="light"] .gold-t,
html[data-theme="light"] .scale-labels .now{color:#BE8D2E}
html[data-theme="light"] .on-dark .lede,
html[data-theme="light"] .chero p,
html[data-theme="light"] .sec-dark p,
html[data-theme="light"] .step p{color:#3B6F6C}
html[data-theme="light"] .on-dark .eyebrow,
html[data-theme="light"] .chero .eyebrow{color:var(--teal) !important}

html[data-theme="light"] .tick{background:rgba(14,61,60,.28)}
html[data-theme="light"] .tick.major{background:rgba(14,61,60,.46)}
html[data-theme="light"] .tick.band{background:#C99A3E}
html[data-theme="light"] .tick.top{background:#C99A3E;box-shadow:0 0 12px rgba(201,154,62,.45)}
html[data-theme="light"] .scale-line{background:rgba(14,61,60,.18)}
html[data-theme="light"] .scale-labels,
html[data-theme="light"] .scale-cap{color:rgba(14,61,60,.55)}

html[data-theme="light"] .pill-out,
html[data-theme="light"] .pill-ghost{color:var(--deep);border-color:rgba(14,61,60,.38)}
html[data-theme="light"] .pill-out:hover,
html[data-theme="light"] .pill-ghost:hover{background:rgba(14,61,60,.06);border-color:var(--deep)}

/* nav */
html[data-theme="light"] .nav.solid{background:rgba(250,250,244,.82);border-bottom-color:rgba(14,61,60,.10)}
html[data-theme="light"] .brand-txt{color:var(--deep)}
html[data-theme="light"] .nav-links a{color:rgba(14,61,60,.78)}
html[data-theme="light"] .nav-links a:hover{color:var(--deep)}
html[data-theme="light"] .burger span{background:var(--deep)}
html[data-theme="light"] .nav{color:var(--deep)}
html[data-theme="light"] .drawer{background:rgba(250,250,244,.98)}
html[data-theme="light"] .drawer a{color:var(--deep);border-bottom-color:rgba(14,61,60,.1)}

/* how-it-works band + footer */
html[data-theme="light"] .sec-dark{background:#DDF0EA;color:var(--ink)}
html[data-theme="light"] .step{border-top-color:rgba(14,61,60,.2)}
html[data-theme="light"] .foot{background:#DDF0EA;color:rgba(14,61,60,.72)}
html[data-theme="light"] .foot a:hover,
html[data-theme="light"] .foot-bot a:hover{color:var(--deep)}
html[data-theme="light"] .foot h5{color:var(--teal)}
html[data-theme="light"] .foot-top{border-bottom-color:rgba(14,61,60,.14)}
html[data-theme="light"] .foot-bot{color:rgba(14,61,60,.58)}
html[data-theme="light"] .tag-gold{color:#BE8D2E}

/* standalone pages (thanks / applied / 404) */
html[data-theme="light"]:has(main.card),
html[data-theme="light"] body:has(> main.card){background:#F6F6EC}
html[data-theme="light"] main.card{color:#0E3D3C}
html[data-theme="light"] main.card h1{color:#0E3D3C}
html[data-theme="light"] main.card p{color:#3B6F6C}
html[data-theme="light"] main.card .kick{color:#2E7C7D}
html[data-theme="light"] main.card .tick{background:#6FD6BE}
html[data-theme="light"] main.card .ghost{border-color:rgba(14,61,60,.38);color:#0E3D3C}
html[data-theme="light"] main.card .ghost:hover{border-color:#0E3D3C;background:rgba(14,61,60,.06)}
html[data-theme="light"] main.card .solid{background:#0E3D3C;color:#fff}
html[data-theme="light"] main.card .solid:hover{background:#134f4d}

/* ═══════════ DARK ═══════════ */
html[data-theme="dark"],
html[data-theme="dark"] body{
  color-scheme:dark;
}
html[data-theme="dark"]{
  --paper:#0A2827; --paper-2:#0E3231; --ink:#EAF4F2; --muted:#9DB6B3; --line:rgba(255,255,255,.13);
}
html[data-theme="dark"] .tile,
html[data-theme="dark"] .price,
html[data-theme="dark"] .card:not(main),
html[data-theme="dark"] .bookform,
html[data-theme="dark"] .rate-card,
html[data-theme="dark"] .suglist,
html[data-theme="dark"] .inp,
html[data-theme="dark"] .opt,
html[data-theme="dark"] .mem,
html[data-theme="dark"] .tutor,
html[data-theme="dark"] .toc,
html[data-theme="dark"] .duo figure,
html[data-theme="dark"] .trio figure,
html[data-theme="dark"] .ref-tab,
html[data-theme="dark"] .code-link-row,
html[data-theme="dark"] .copy-btn{background:#113C3B;color:var(--ink)}
html[data-theme="dark"] .ref-tab.active{background:#165250}
html[data-theme="dark"] .langs{background:#0E3231}
html[data-theme="dark"] .langs .sub:hover{background:#113C3B}
html[data-theme="dark"] .inp::placeholder{color:#7F9996}
html[data-theme="dark"] .inp.bad{background:#3A1F1C}
html[data-theme="dark"] .err{color:#F09A86}
html[data-theme="dark"] .opt:has(input:checked){border-color:var(--mint)}
html[data-theme="dark"] .opt:has(input:checked) .dot{border-color:var(--mint)}
html[data-theme="dark"] .sub:has(input:checked) .box{background:var(--mint);border-color:var(--mint)}
html[data-theme="dark"] .sub:has(input:checked) .box::after{border-color:var(--deep)}
html[data-theme="dark"] .sub:hover{background:rgba(255,255,255,.05)}
html[data-theme="dark"] .box{border-color:#5E8480}
html[data-theme="dark"] .pill-dark{background:var(--mint);color:var(--deep)}
html[data-theme="dark"] .pill-dark:hover{background:var(--mint-2)}
html[data-theme="dark"] .foot{background:#071E1D;border-top:1px solid rgba(255,255,255,.08)}
html[data-theme="dark"] .sec-dark{background:#0E3D3C}
html[data-theme="dark"] .tile.dark{background:#0E3D3C;border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .price .unit,
html[data-theme="dark"] .save{background:#1B4C4A;color:var(--mint-2)}
html[data-theme="dark"] .fill{background:#4A3E1E}
html[data-theme="dark"] .notice{background:rgba(89,191,191,.12)}
html[data-theme="dark"] .about strong,
html[data-theme="dark"] .code-heading,
html[data-theme="dark"] .code-val,
html[data-theme="dark"] .facts tr td:first-child,
html[data-theme="dark"] .legal strong,
html[data-theme="dark"] .ot,
html[data-theme="dark"] .qlab,
html[data-theme="dark"] .ref-tab strong,
html[data-theme="dark"] .save b,
html[data-theme="dark"] .sent-q,
html[data-theme="dark"] .tbl tr td:first-child,
html[data-theme="dark"] .q button,
html[data-theme="dark"] .price .amt{color:var(--ink)}
html[data-theme="dark"] .tile.dark h4,
html[data-theme="dark"] .tile.dark p{color:#fff}
html[data-theme="dark"] .pill-white{background:var(--ink);color:var(--deep)}

.nav-links a{white-space:nowrap}
@media(max-width:1200px){.nav-links{gap:16px}.nav-links a{font-size:13.5px}}
html[data-theme="light"] .step .k,
html[data-theme="light"] .foot h5,
html[data-theme="light"] .on-dark .eyebrow{color:#2E7C7D !important}

html[data-theme="light"] .theme-toggle.floating{color:#0E3D3C}
html[data-theme="dark"] .theme-toggle.floating{color:#fff}