/* ============================================================
   Calm State Co — site-wide dark mode  ·  "Midnight Sage"
   Loaded on every page after its own <style>, so [data-theme="dark"]
   rules win. Light mode is the brand default and is untouched.

   Strategy: flip the safe shared design tokens (surfaces + body text),
   then targeted overrides for the few tokens that do double duty
   (--cream is both page bg AND light-text-on-dark; --forest is both
   the button fill AND link colour; --canopy is both a dark band AND
   some heading colours). Intentionally-dark image bands (hero,
   page-head, vista, portrait) are left alone — they already read at night.
   ============================================================ */

/* ---- 1. Safe token flips (cascade everywhere these vars are used) ---- */
[data-theme="dark"]{
  --fern:#11231F;          /* recessed bands: trust, products, signup, beliefs, coming, faq */
  --fern-card:#16302A;     /* elevated cards: founder card, try-box, side-note, intro */
  --ink:#E9F0EA;           /* body text + headings that inherit + nav links */
  --ink-muted:#9FB6AA;     /* muted text */
  --sage:#9CC1B0;          /* eyebrows, hairline accents, italics borders */
  --forest:#86B49E;        /* links + accents (button fill handled below) */
}

/* ---- 2. Page canvas ---- */
[data-theme="dark"] body{ background:#0C1A17; }
[data-theme="dark"] #preloader{ background:#0C1A17 !important; }

/* ---- 3. Elevated / card surfaces (were --cream, #fff, --fern-card) ---- */
[data-theme="dark"] .prod,
[data-theme="dark"] .item,
[data-theme="dark"] .coming-card,
[data-theme="dark"] .belief,
[data-theme="dark"] .csc-modal,
[data-theme="dark"] .csc-country,
[data-theme="dark"] .success,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .toc,
[data-theme="dark"] .card{
  background:#16302A;
  border-color:rgba(167,192,176,.16);
}
[data-theme="dark"] .promptkit-art{ background:#11231F; }

/* Form fields & pill buttons that were #fff */
[data-theme="dark"] input[type=email],
[data-theme="dark"] #search,
[data-theme="dark"] .tbtn{
  background:#11231F;
  border-color:rgba(167,192,176,.22);
  color:#E9F0EA;
}
[data-theme="dark"] .tbtn{ color:#86B49E; }
[data-theme="dark"] input[type=email]::placeholder,
[data-theme="dark"] #search::placeholder{ color:#7E948B; }

/* ---- 4. Top nav (scoped by its .nav-inner so footer <nav>s never match) ---- */
[data-theme="dark"] nav:has(.nav-inner){
  background:rgba(10,24,21,.86);
  border-bottom-color:rgba(167,192,176,.16);
  box-shadow:0 1px 22px rgba(0,0,0,.45);
}
/* Belt & suspenders: never let footer navs pick up bar styling */
[data-theme="dark"] footer .ft-nav,
[data-theme="dark"] footer .ft-legal{ background:transparent; box-shadow:none; border:0; }

/* ---- 5. Buttons (—forest is now the accent; give the fill dark text) ---- */
[data-theme="dark"] .cta{
  background:#86B49E; color:#0C1A17;
  border-color:rgba(167,192,176,.35);
  box-shadow:0 0 0 1px rgba(134,180,158,.22), 0 10px 30px rgba(134,180,158,.3);
}
[data-theme="dark"] .cta:hover{
  background:#A7C0B0; color:#0A1815; transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(167,192,176,.4), 0 14px 42px rgba(134,180,158,.48);
}
[data-theme="dark"] .cta.ghost{
  background:transparent; color:#86B49E;
  border-color:rgba(167,192,176,.32); box-shadow:none;
}
[data-theme="dark"] .cta.ghost:hover{ background:rgba(134,180,158,.1); border-color:#86B49E; }
[data-theme="dark"] .founder .mono{ color:#0C1A17; }            /* sage circle, dark monogram */
[data-theme="dark"] .cat-nav a.active{ color:#0C1A17; }         /* prompt-kit active category */
[data-theme="dark"] .fav-toggle button.active{ background:#16302A; color:#86B49E; }

/* Contrast fixes (caught by QC): badges & skip-link were light-on-light in dark */
[data-theme="dark"] .price-chip.free{ background:#86B49E; color:#0C1A17; }
[data-theme="dark"] .skip-link{ background:#0F2823; color:#E9F0EA; }

/* ---- 6. Headings that hard-code --canopy (would be invisible on dark) ---- */
[data-theme="dark"] .post .try h2,
[data-theme="dark"] .faq h2,
[data-theme="dark"] .policy h2,
[data-theme="dark"] .index .card h3,
[data-theme="dark"] .card h3,
[data-theme="dark"] .tbl th{ color:#EEF4EE; }

/* ---- 7. Footer — one seamless surface, same as the page ---- */
[data-theme="dark"] footer{ background:#0C1A17; border-top-color:transparent; }
[data-theme="dark"] footer .ft-rule{ background:rgba(167,192,176,.16); }
[data-theme="dark"] .foot-social a,
[data-theme="dark"] footer .ft-social a{ color:#86B49E; }
[data-theme="dark"] .foot-social a:hover,
[data-theme="dark"] .foot-social a:focus-visible,
[data-theme="dark"] footer .ft-social a:hover,
[data-theme="dark"] footer .ft-social a:focus-visible{ color:#A7C0B0; }

/* ---- 8. Prompt-kit band — seamless, with a soft ambient sage glow ---- */
[data-theme="dark"] .kit-band{
  background:radial-gradient(120% 90% at 50% 0%, rgba(134,180,158,.12) 0%, rgba(134,180,158,.03) 42%, transparent 70%), #0C1A17;
}

/* ---- 9. Glow blooms on hover (the approved Midnight-Sage touch) ---- */
[data-theme="dark"] .prod:hover,
[data-theme="dark"] .item:hover,
[data-theme="dark"] .card:hover{
  border-color:rgba(134,180,158,.4);
  box-shadow:0 18px 44px rgba(0,0,0,.5), 0 0 30px rgba(134,180,158,.18);
}

/* ---- 9b. Prompt-kit page: clickable action buttons, prompt boxes, mobile chrome
   (page-specific classes that hard-code #fff / --cream / --fern-card) ---- */
[data-theme="dark"] .act{
  background:#11231F; border-color:rgba(167,192,176,.18); color:#E9F0EA;
}
[data-theme="dark"] .act:hover{ background:rgba(134,180,158,.12); border-color:#86B49E; }
[data-theme="dark"] .act.primary{
  background:#86B49E; color:#0C1A17; border-color:rgba(167,192,176,.35);
}
[data-theme="dark"] .act.primary:hover{ background:#A7C0B0; color:#0A1815; border-color:#A7C0B0; }
[data-theme="dark"] .prompt-box{ background:#11231F; border-color:rgba(167,192,176,.14); }
[data-theme="dark"] .card.open{ border-color:rgba(134,180,158,.28); }
[data-theme="dark"] .card.open.card,
[data-theme="dark"] .card.open{ box-shadow:0 18px 44px rgba(0,0,0,.5), 0 0 26px rgba(134,180,158,.16); }
@media (max-width:980px){
  [data-theme="dark"] .sidebar{ background:#0C1A17; border-right-color:rgba(167,192,176,.1); }
  [data-theme="dark"] .toolbar{ background:#0C1A17; border-bottom-color:rgba(167,192,176,.1); }
}
@media (max-width:760px){ [data-theme="dark"] .nav-links{ background:#0C1A17; } }

/* ---- 10. Mobile nav dropdown ---- */
@media (max-width:720px){
  [data-theme="dark"] .nav-links{
    background:#0C1A17;
    box-shadow:0 12px 24px rgba(0,0,0,.5);
    border-bottom-color:rgba(167,192,176,.12);
  }
}

/* ============================================================
   Sun / moon toggle  (injected into .nav-inner by dark-mode.js)
   Styled for both themes; lives inline in the nav.
   ============================================================ */
.csc-theme-toggle{
  position:relative; width:40px; height:40px; border-radius:999px; flex:none;
  display:grid; place-items:center; padding:0;
  background:var(--fern); border:1px solid rgba(12,94,88,.16); cursor:pointer;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,transform .2s ease;
}
.csc-theme-toggle:hover{ transform:translateY(-1px); }
.csc-theme-toggle:focus-visible{ outline:2px solid var(--forest); outline-offset:3px; }
.csc-theme-toggle svg{
  position:absolute; width:19px; height:19px; fill:none; stroke:var(--forest);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  transition:opacity .35s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.csc-theme-toggle .ic-sun{ opacity:0; transform:rotate(-50deg) scale(.5); }
.csc-theme-toggle .ic-moon{ opacity:1; transform:none; }
[data-theme="dark"] .csc-theme-toggle .ic-sun{ opacity:1; transform:none; }
[data-theme="dark"] .csc-theme-toggle .ic-moon{ opacity:0; transform:rotate(50deg) scale(.5); }
[data-theme="dark"] .csc-theme-toggle{
  background:#16302A; border-color:rgba(167,192,176,.24);
  box-shadow:0 0 18px rgba(134,180,158,.22), inset 0 0 0 1px rgba(134,180,158,.06);
}
[data-theme="dark"] .csc-theme-toggle svg{ stroke:#C4E3D2; }
@media (max-width:720px){ .csc-theme-toggle{ width:38px; height:38px; } }

/* ============================================================
   Calm cross-fade when switching themes (skipped for reduced motion
   and for the very first paint, which is already set before render).
   ============================================================ */
[data-theme] body,
[data-theme] nav,
[data-theme] footer,
[data-theme] .prod,
[data-theme] .item,
[data-theme] .card,
[data-theme] .belief,
[data-theme] .coming-card,
[data-theme] .cta,
[data-theme] .kit-band,
[data-theme] .csc-theme-toggle{
  transition:background-color .5s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
@media (prefers-reduced-motion:reduce){
  [data-theme] body,[data-theme] nav,[data-theme] footer,[data-theme] .prod,
  [data-theme] .item,[data-theme] .card,[data-theme] .belief,[data-theme] .coming-card,
  [data-theme] .cta,[data-theme] .kit-band,[data-theme] .csc-theme-toggle,
  .csc-theme-toggle svg{ transition:none; }
}