/* ===========================================================
   Studio Untitled — Theme layer (light / dark)
   Loaded AFTER each page's inline <style>, so it wins on
   equal specificity. The inline styles remain the DARK
   baseline; everything below is either a shared token or a
   LIGHT-mode correction.

   Brand note: --volt (#E2FF04) stays the brand yellow for
   SOLID FILLS (buttons, badges, CTA blocks) in both themes.
   On a light background that yellow is unreadable as text
   (~1.1:1), so accent TEXT and hairlines use --vi instead —
   the same hue darkened to pass WCAG AA (5.3:1).
   =========================================================== */

/* ---------- Tokens ---------- */
:root{
  color-scheme:dark;
  --vi:var(--volt);                    /* accent ink   */
  --hdr:rgba(11,12,10,.86);            /* sticky header */
  --thumb:#2a2c26;                     /* scrollbar    */
  --fstroke:rgba(242,244,236,.35);     /* footer wordmark */
  --grid:rgba(242,244,236,.035);       /* column rules */
  --edge:rgba(226,255,4,.55);          /* card hover border */
  --scrim:rgba(5,6,4,.92);             /* lightbox      */
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F5F5EF;
  --bg2:#FFFFFF;
  --ink:#101208;
  --mut:#5B6152;
  --line:rgba(16,18,8,.14);
  --vi:#5C6B00;
  --hdr:rgba(245,245,239,.88);
  --thumb:#C7C9BC;
  --fstroke:rgba(16,18,8,.32);
  --grid:rgba(16,18,8,.05);
  --edge:rgba(92,107,0,.45);
  --scrim:rgba(245,245,239,.94);
}
body{transition:background-color .35s ease,color .35s ease}

/* ---------- Header right-hand cluster ----------
   The nav is justify-content:space-between, which spreads free space
   evenly between EVERY adjacent pair. Adding the toggle as a 4th direct
   child therefore pushed the CTA away from the right edge. Grouping the
   CTA + toggle + burger keeps the nav at three children, so the spacing
   distributes around the group instead of through it. */
.nav-end{display:flex;align-items:center;gap:14px}

/* ---------- Header toggle button ---------- */
.tgl{
  display:inline-grid;place-items:center;flex:none;
  width:46px;height:46px;border-radius:999px;
  background:none;border:1px solid var(--line);color:var(--ink);
  position:relative;z-index:130;transition:.3s var(--e)
}
.tgl:hover{border-color:var(--vi);color:var(--vi);transform:translateY(-2px)}
.tgl:focus-visible{outline:2px solid var(--vi);outline-offset:3px}
.tgl svg{width:18px;height:18px;display:block}
.tgl .i-sun{display:none}
.tgl .i-moon{display:block}
[data-theme="dark"] .tgl .i-sun{display:block}
[data-theme="dark"] .tgl .i-moon{display:none}
/* Below 760px the CTA hides and .nav-end holds just toggle + burger,
   which the nav's space-between already pins to the right edge. */
@media(max-width:760px){.nav-end{gap:10px}}

/* ---------- Shared surfaces (both themes) ---------- */
header.sc{background:var(--hdr)}
::-webkit-scrollbar-thumb{background:var(--thumb)}
.fbig{-webkit-text-stroke-color:var(--fstroke)}

/* ===========================================================
   LIGHT MODE CORRECTIONS
   =========================================================== */

/* Backdrops that were hardcoded dark */
[data-theme="light"] body::after{opacity:.04}
[data-theme="light"] body::before{
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),var(--grid) calc(25% - 1px),var(--grid) 25%)
}
[data-theme="light"] #cur{background:var(--vi)}
[data-theme="light"] #curR{border-color:var(--vi)}

/* Accent text + hairlines: volt -> volt-ink */
[data-theme="light"] .logo b,
[data-theme="light"] .volt,
[data-theme="light"] .kicker,
[data-theme="light"] .snum b,
[data-theme="light"] .mq i,
[data-theme="light"] .menu a.on,
[data-theme="light"] .mnav a:hover,
[data-theme="light"] .mnav a small,
[data-theme="light"] .cathead,
[data-theme="light"] .wstep .n,
[data-theme="light"] .val .n,
[data-theme="light"] .stat .v,
[data-theme="light"] .quote cite,
[data-theme="light"] .hrc .h span,
[data-theme="light"] .ta,
[data-theme="light"] .trust b,
[data-theme="light"] .hmeta b,
[data-theme="light"] .fcols h5,
[data-theme="light"] .fcols a:hover,
[data-theme="light"] .fbot a:hover,
[data-theme="light"] .icard h5,
[data-theme="light"] .icard a:hover,
[data-theme="light"] #lb .tg{color:var(--vi)}

[data-theme="light"] .kicker::before,
[data-theme="light"] .menu a::after,
[data-theme="light"] .tdots button.on{background:var(--vi)}

[data-theme="light"] .quote{border-color:var(--vi)}
[data-theme="light"] .plan li::before,
[data-theme="light"] .wstep li::before{color:var(--vi)}
[data-theme="light"] .plan.hot li::before{color:#000}
[data-theme="light"] .val:hover .n{color:#00000060}
[data-theme="light"] .icard a.wa:hover{color:#25D366}

/* Outlined / bordered accents */
[data-theme="light"] .btn:hover{color:var(--vi);border-color:var(--vi)}
[data-theme="light"] .btn.ghost:hover,
[data-theme="light"] .filters button:hover,
[data-theme="light"] .tabs button:hover,
[data-theme="light"] .gtags span:hover,
[data-theme="light"] .hrc a{border-color:var(--vi);color:var(--vi)}
[data-theme="light"] .hrc a:hover{border-color:var(--volt);color:#000}
[data-theme="light"] .filters button.on:hover,
[data-theme="light"] .tabs button.on:hover{border-color:var(--volt);color:#000}
/* keep black-on-volt legible where a dark chip sits on a volt block */
[data-theme="light"] .plan.hot .btn:hover,
[data-theme="light"] .cta .btn:hover{color:#000;border-color:#000}

/* Card hover edges */
[data-theme="light"] .plan:hover,
[data-theme="light"] .hrc:hover,
[data-theme="light"] .wstep:hover,
[data-theme="light"] .pitem:hover,
[data-theme="light"] .gcard:hover,
[data-theme="light"] .icard:hover{border-color:var(--edge)}

/* Footer wordmark hover */
[data-theme="light"] .fbig:hover{color:var(--vi);-webkit-text-stroke-color:var(--vi)}

/* Big decorative quote glyph */
[data-theme="light"] .tst::before{color:rgba(92,107,0,.13)}

/* Portfolio: overlay gradient stays dark, so its text must stay light */
[data-theme="light"] .pitem .ov{color:#F2F4EC}
[data-theme="light"] #lb{background:var(--scrim)}

/* Contact form */
[data-theme="light"] .fg input:focus,
[data-theme="light"] .fg select:focus,
[data-theme="light"] .fg textarea:focus{border-color:var(--vi);box-shadow:0 0 0 3px rgba(92,107,0,.16)}
[data-theme="light"] #ok{border-color:rgba(92,107,0,.45);background:rgba(92,107,0,.07);color:var(--vi)}
[data-theme="light"] .map img{filter:grayscale(1) brightness(1.02) contrast(.92)}

@media(prefers-reduced-motion:reduce){
  body{transition:none}
  .tgl:hover{transform:none}
}