/* ============================================================================
   theme.css — Light/Dark theming layer (next-themes + shadcn token convention)

   HOW IT WORKS
   - The site's existing design IS the dark theme. It is the default and is left
     completely untouched: every rule in this file is scoped under
     `[data-theme="light"]`, a selector the dark theme never sets. So with
     data-theme="dark" (or unset) nothing here applies and the site renders
     byte-for-byte as before.
   - Light mode is produced by (a) re-declaring the existing design tokens
     (--ink-* surfaces, --paper-* text, --line borders) to their light values so
     everything token-driven flips automatically, and (b) a handful of targeted
     overrides for the spots that hardcoded #000 / #fff / rgba() instead of a
     token.
   - The brand accent ramp (--cyan / --magenta / --orange / --grad) is shared by
     both themes — it reads well on light and dark, so it is intentionally NOT
     overridden.
   ========================================================================== */

/* ---- 1. Token flip --------------------------------------------------------
   In dark: --ink-* are dark surfaces, --paper-* are light text. Light mode is
   the mirror image: --ink-* become warm-paper surfaces, --paper-* become ink
   text. Tuned warm to match the brand's cream (#F2EEE6) rather than clinical
   white. */
:root[data-theme="light"]{
  --ink-0:#FBFAF6;   /* page base — warm near-white */
  --ink-1:#F3F1E9;   /* elevated surface */
  --ink-2:#EAE7DD;   /* floating surface */
  --ink-3:#DEDACE;   /* deepest surface */
  --paper:#16171E;   /* primary text — ink */
  --paper-1:#2B2C37; /* strong body */
  --paper-2:#565A6E; /* muted body / labels */
  --paper-3:#7E8294; /* faint meta */
  --line:rgba(22,23,30,0.10);
  --line-strong:rgba(22,23,30,0.16);
}

/* meta theme-color is updated from JS; nothing needed here. */

/* ---- 2. Page + section backgrounds (hardcoded #000 → light) -------------- */
[data-theme="light"] body{background:var(--ink-0)}
[data-theme="light"] .nav,
[data-theme="light"] .trust,
[data-theme="light"] .stats,
[data-theme="light"] .sec,
[data-theme="light"] .illuminate,
[data-theme="light"] .founder,
[data-theme="light"] .cta,
[data-theme="light"] .hero,
/* subpage section wrappers that also paint #000 to sit on the black body */
[data-theme="light"] .page,
[data-theme="light"] .post,
[data-theme="light"] .article,
[data-theme="light"] .svc-detail,
[data-theme="light"] .detail,
[data-theme="light"] .band{background:var(--ink-0)}

/* the .nav has its own translucent glass gradient — give it a light one */
[data-theme="light"] .nav{
  background:linear-gradient(to bottom,rgba(251,250,246,.74),rgba(251,250,246,.55));
}

/* Brand logo: the icon glyph is a cream (#F2EEE6) inline SVG that vanishes on a
   light background. Recolour just those cream shapes to the ink text colour so
   the mark matches the wordmark; the brand-gradient swoosh (fill:url(#brandGrad))
   is left untouched. Covers the nav + footer logos on every page. */
[data-theme="light"] .nav-logo svg path[fill="#F2EEE6"]{fill:var(--paper)}

/* ---- 3. Seam gradients that fade to/from #000 ---------------------------- */
[data-theme="light"] .hero::after{
  background:linear-gradient(to bottom,rgba(251,250,246,0) 0%,rgba(251,250,246,.55) 55%,var(--ink-0) 100%);
}
[data-theme="light"] .trust::before{
  background:linear-gradient(to bottom,var(--ink-0) 0%,rgba(251,250,246,.55) 45%,rgba(251,250,246,0) 100%);
}

/* ---- 4. Decorative overlays (white rgba → ink rgba) ---------------------- */
[data-theme="light"] .gridlines{
  background-image:linear-gradient(to right,rgba(22,23,30,.045) 1px,transparent 1px);
}
/* the noise grain is a white-over-overlay layer; soften it so it doesn't
   sparkle on a light field */
[data-theme="light"] .grain{opacity:.035;mix-blend-mode:multiply}

/* ---- 5. Buttons ---------------------------------------------------------- */
/* btn-primary auto-flips to a dark pill (bg var(--paper), text var(--ink-0)) —
   only its hardcoded #fff hover needs fixing */
[data-theme="light"] .btn-primary:hover{background:#000}
[data-theme="light"] .btn-ghost{background:rgba(22,23,30,.045)}
[data-theme="light"] .btn-ghost:hover{background:rgba(22,23,30,.08)}
[data-theme="light"] .btn-grad{background:rgba(22,23,30,.02)}
[data-theme="light"] .btn-shiny{box-shadow:inset 0 0 0 1px rgba(22,23,30,.12)}
[data-theme="light"] .nav-burger{background:rgba(22,23,30,.04)}
[data-theme="light"] .nav-burger:hover{background:rgba(22,23,30,.07);border-color:rgba(22,23,30,.18)}

/* ---- 6. Pills / eyebrows ------------------------------------------------- */
[data-theme="light"] .eyebrow,
[data-theme="light"] .illuminate-eyebrow{background:rgba(22,23,30,.03)}

/* ---- 7. Cards (near-white rgba fills → faint ink tint) ------------------- */
[data-theme="light"] .stat{
  background:linear-gradient(180deg,rgba(22,23,30,.04),rgba(22,23,30,.012));
}
[data-theme="light"] .svc{
  background:linear-gradient(180deg,rgba(22,23,30,.035),rgba(22,23,30,.008));
}
[data-theme="light"] .svc:hover{
  background:linear-gradient(180deg,rgba(22,23,30,.05),rgba(22,23,30,.014));
}
[data-theme="light"] .founder-card{
  background:linear-gradient(180deg,rgba(22,23,30,.03),rgba(22,23,30,0));
}
[data-theme="light"] .whyc{
  background:linear-gradient(180deg,rgba(22,23,30,.028),rgba(22,23,30,0));
}
[data-theme="light"] .cta-block{
  background:linear-gradient(180deg,rgba(22,23,30,.025),rgba(22,23,30,0));
}
[data-theme="light"] .cta-block::before{background:rgba(22,23,30,.14)}

/* generic catch-alls for subpage cards/panels that use the same idiom */
[data-theme="light"] .card,
[data-theme="light"] .panel-card,
[data-theme="light"] .tile,
[data-theme="light"] .feature{
  background:linear-gradient(180deg,rgba(22,23,30,.03),rgba(22,23,30,.006));
}

/* ---- 8. Trust bar labels (hardcoded #fff text) -------------------------- */
[data-theme="light"] .trust-label{color:var(--paper-2)}
[data-theme="light"] .trust-logos .sep,
[data-theme="light"] .trust-logos span{color:var(--paper)}

/* ---- 9. Illuminate section special-case text gradients ------------------ */
[data-theme="light"] .illuminate-field{background:rgba(22,23,30,.10)}
[data-theme="light"] .illuminate-glowline{
  background:linear-gradient(180deg,#16171e 0%,#7a4a5e 100%);
  -webkit-background-clip:text;background-clip:text;
}
[data-theme="light"] .illuminate-sub{
  background:linear-gradient(to top,#565a6e 0%,#2b2c37 100%);
  -webkit-background-clip:text;background-clip:text;
}
[data-theme="light"] .illuminate-sub b{
  background:linear-gradient(0deg,#c01f6e 0%,#16171e 62%);
  -webkit-background-clip:text;background-clip:text;
}

/* ---- 10. Dark "islands" ----------------------------------------------------
   Some panels keep a HARDCODED dark background in BOTH themes by design —
   product mockups and demo surfaces: the framework spine, the pull-quote, the
   browser/lighthouse mockups, the SERP / console / queue / board / table demos.
   Their surface stays dark in light mode, so their text must stay light too.
   We restore the dark-theme token values *inside* each island, so every
   descendant (text, hairlines, inner badges) renders exactly as it does in
   dark mode. Add new island container classes here if more are introduced. */
[data-theme="light"] :is(
  .spine, .quote,            /* framework */
  .brow, .lh,                /* web development */
  .console,                  /* ai-intelligence, data-and-tracking */
  .ptable,                   /* partner & affiliate */
  .board,                    /* performance & creative */
  .auto,                     /* retention & lifecycle */
  .queue,                    /* scalable support */
  .serp                      /* SEO */
){
  --ink-0:#0A0A11;
  --ink-1:#10111A;
  --ink-2:#161824;
  --ink-3:#1E2031;
  --paper:#F2EEE6;
  --paper-1:#DCDBD4;
  --paper-2:#9C9FAE;
  --paper-3:#6A6E83;
  --line:rgba(255,255,255,0.08);
  --line-strong:rgba(255,255,255,0.14);
}

/* ---- 11. Hero card glow bleed ----------------------------------------------
   The hero mockup cards (the dark islands above) cast a soft downward shadow
   that overflows below the hero. The next section is opaque (it has to be — it
   masks the fixed gridlines/grain behind it), comes later in the DOM, and so
   paints over the lower half of that shadow, clipping it in a hard horizontal
   line at the hero/section seam. Lifting the hero one layer lets its shadow
   render above the following section, so the glow fades out smoothly instead.
   In dark mode the shadow is black-on-black (invisible), so this is light-only. */
[data-theme="light"] .hero{position:relative;z-index:1}

/* ============================================================================
   THEME TOGGLE BUTTON — themed for both modes, lives in .nav-cta
   ========================================================================== */
.theme-toggle{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 40px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.04);
  color:var(--paper);
  cursor:pointer;
  transition:background 200ms var(--ease-out),border-color 200ms var(--ease-out),transform 160ms var(--ease-out);
}
.theme-toggle:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.theme-toggle:active{transform:scale(.94)}
.theme-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.theme-toggle svg{width:18px;height:18px;display:block}
/* the two glyphs are stacked; JS-independent — visibility is driven purely by
   the data-theme attribute so there's never a flash of the wrong icon */
.theme-toggle .t-sun{display:block}
.theme-toggle .t-moon{display:none}
[data-theme="light"] .theme-toggle{background:rgba(22,23,30,.045)}
[data-theme="light"] .theme-toggle:hover{background:rgba(22,23,30,.08);border-color:rgba(22,23,30,.2)}
[data-theme="light"] .theme-toggle .t-sun{display:none}
[data-theme="light"] .theme-toggle .t-moon{display:block}

/* keep the toggle visible at every breakpoint (unlike the hidden nav buttons) */
@media (max-width:1040px){
  .nav-cta .theme-toggle{display:inline-flex}
}