/* ============================================================
   KENT.DESIGN — LIGHT IDENTITY (phase 2, 2026-08-22)
   Token flip: glow becomes pigment. Loaded after pages.css;
   active only under body.kd-light. Nav, mobile menu, footer and
   #about are dark punctuation bands (tokens re-pinned to dark).
   ============================================================ */

body.kd-light{
  --bg0:#f7f8fb;
  --bg1:#eef1f7;
  --panel:#ffffff;
  --panel2:#f1f4fa;
  --line:rgba(16,24,40,.10);
  --line2:rgba(16,24,40,.17);
  --text:#131a28;
  --muted:#56607a;
  --cyan:#0d947f;
  --violet:#1f7bd0;
  --pink:#c2841c;
  --grad:linear-gradient(92deg,#0d947f 0%,#1f7bd0 52%,#c2841c 100%);
  --cyan-rgb:13,148,127;
  --sky-rgb:31,123,208;
  --amber-rgb:194,132,28;
  --amber2-rgb:205,150,60;
  --wash-rgb:16,24,40;
  --shadow-rgb:30,41,66;
  --greyblue-rgb:100,112,140;
  --icefog-rgb:36,46,74;
  --scrim1-rgb:246,248,251;
  --scrim2-rgb:255,255,255;
  --scrim3-rgb:255,255,255;
  --scrim4-rgb:255,255,255;
  --scrim5-rgb:6,8,18;
  --scrim6-rgb:255,255,255;
  --scrim7-rgb:255,255,255;
  --err-rgb:214,69,60;
  --c-ffffff:#ffffff;
  --c-000000:#000000;
  --c-02070d:#fbfcfe;
  --c-041018:#f4f7fa;
  --c-07141d:#eef2f7;
  --c-0d1728:#ffffff;
  --c-0a1220:#f4f7ff;
  --c-0b0f1e:#ffffff;
  --c-0b1524:#ffffff;
  --c-070f1a:#fbfcfe;
  --c-060c15:#ffffff;
  --c-050b13:#edf0f5;
  --c-0a121f:#ffffff;
  --c-070a10:#fbfcfe;
  --c-0a1018:#f7f9fc;
  --c-c3cbe8:#3d4966;
  --c-c2c9e2:#454f68;
  --c-cfd6f2:#3a445e;
  --c-c9d2ea:#414b66;
  --c-c9d3ee:#414b66;
  --c-e7ecfa:#2a3450;
  --c-e9edfb:#28324e;
  --c-e2e9fa:#2b3552;
  --c-e2e8f8:#2b3552;
  --c-f2f4f8:#1c2438;
  --c-7d89a8:#5d6880;
  --c-7d87a8:#5d6880;
  --c-707a99:#77809a;
  --c-8f98b5:#5f6a86;
  --c-8f99b8:#5f6a86;
  --c-8b95b4:#5f6a86;
  --c-93a0bf:#5f6a86;
  --c-8494b5:#5f6a86;
  --c-a3acc8:#58627e;
  --c-5f6b8a:#8892ab;
  --c-8fa2b8:#60708a;
  --c-7f8ca4:#60708a;
  --c-7d93b8:#7787a3;
  --c-4d7ea6:#b9c4d6;
  --c-7fe8d6:#0d8271;
  --c-8ff2dc:#0c7c6b;
  --c-8fffcf:#0a8a5f;
  --c-7fd0c7:#1a8a7d;
  --c-ffd9d5:#b3261e;
  --c-ff5f57:#ff5f57;
  --c-febc2e:#febc2e;
  --c-28c840:#28c840;
}

/* ---- dark punctuation bands: re-pin every token to its dark value ---- */
body.kd-light footer, body.kd-light .final-card{
  --bg0:#040a10;
  --bg1:#07121c;
  --panel:rgba(255,255,255,.045);
  --panel2:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.16);
  --text:#eef1fb;
  --muted:#9aa3c0;
  --cyan:#3ee6c8;
  --violet:#38bdf8;
  --pink:#ffd382;
  --grad:linear-gradient(92deg,var(--cyan) 0%,var(--violet) 52%,var(--pink) 100%);
  --cyan-rgb:62,230,200;
  --sky-rgb:56,189,248;
  --amber-rgb:255,211,130;
  --amber2-rgb:255,226,160;
  --wash-rgb:255,255,255;
  --shadow-rgb:0,0,0;
  --greyblue-rgb:148,163,203;
  --icefog-rgb:228,233,250;
  --scrim1-rgb:1,4,9;
  --scrim2-rgb:4,8,16;
  --scrim3-rgb:4,7,14;
  --scrim4-rgb:5,7,15;
  --scrim5-rgb:6,8,18;
  --scrim6-rgb:4,10,16;
  --scrim7-rgb:6,14,22;
  --err-rgb:255,95,87;
  --c-ffffff:#ffffff;
  --c-000000:#000000;
  --c-02070d:#02070d;
  --c-041018:#041018;
  --c-07141d:#07141d;
  --c-0d1728:#0d1728;
  --c-0a1220:#0a1220;
  --c-0b0f1e:#0b0f1e;
  --c-0b1524:#0b1524;
  --c-070f1a:#070f1a;
  --c-060c15:#060c15;
  --c-050b13:#050b13;
  --c-0a121f:#0a121f;
  --c-070a10:#070a10;
  --c-0a1018:#0a1018;
  --c-c3cbe8:#c3cbe8;
  --c-c2c9e2:#c2c9e2;
  --c-cfd6f2:#cfd6f2;
  --c-c9d2ea:#c9d2ea;
  --c-c9d3ee:#c9d3ee;
  --c-e7ecfa:#e7ecfa;
  --c-e9edfb:#e9edfb;
  --c-e2e9fa:#e2e9fa;
  --c-e2e8f8:#e2e8f8;
  --c-f2f4f8:#f2f4f8;
  --c-7d89a8:#7d89a8;
  --c-7d87a8:#7d87a8;
  --c-707a99:#707a99;
  --c-8f98b5:#8f98b5;
  --c-8f99b8:#8f99b8;
  --c-8b95b4:#8b95b4;
  --c-93a0bf:#93a0bf;
  --c-8494b5:#8494b5;
  --c-a3acc8:#a3acc8;
  --c-5f6b8a:#5f6b8a;
  --c-8fa2b8:#8fa2b8;
  --c-7f8ca4:#7f8ca4;
  --c-7d93b8:#7d93b8;
  --c-4d7ea6:#4d7ea6;
  --c-7fe8d6:#7fe8d6;
  --c-8ff2dc:#8ff2dc;
  --c-8fffcf:#8fffcf;
  --c-7fd0c7:#7fd0c7;
  --c-ffd9d5:#ffd9d5;
  --c-ff5f57:#ff5f57;
  --c-febc2e:#febc2e;
  --c-28c840:#28c840;
}

/* ---- ground: paper with the same three-hue atmosphere ---- */
body.kd-light{background:var(--bg0)}
body.kd-light .bg-stage{background:
  radial-gradient(520px 380px at 84% 6%,rgba(194,132,28,.07),transparent 60%),
  radial-gradient(1200px 800px at 80% -10%,rgba(31,123,208,.08),transparent 60%),
  radial-gradient(1000px 700px at -10% 30%,rgba(13,148,127,.05),transparent 55%),
  linear-gradient(180deg,#fbfcfe 0%,#f5f7fa 78%,#eef1f6 100%)}

/* canvases: additive glow -> pigment. multiply turns the same light into ink */
body.kd-light #fx-aurora{mix-blend-mode:multiply;opacity:.5;filter:blur(70px) saturate(1.05)}
body.kd-light #fx-fire{mix-blend-mode:multiply;opacity:.5}

body.kd-light .blob{mix-blend-mode:multiply;opacity:.22}
body.kd-light .noise{filter:invert(1);opacity:.3}
body.kd-light .grid-lines{opacity:.55}

/* selection + focus */
body.kd-light ::selection{background:rgba(31,123,208,.25);color:var(--text)}

/* primary button: solid brand-gradient fill so it pops on paper */
body.kd-light .btn-primary{background:linear-gradient(135deg,#0d947f 0%,#166ec4 100%);border:1px solid transparent;color:#fff;
  box-shadow:0 10px 26px rgba(13,148,127,.28),0 3px 8px rgba(16,24,40,.12)}
body.kd-light .btn-primary:hover{box-shadow:0 14px 32px rgba(13,148,127,.38),0 4px 10px rgba(16,24,40,.14)}

/* hero app mock + browser chrome shadows soften automatically via --shadow-rgb */

/* dark punctuation bands need their own paint (they sat on bg-stage before) */
body.kd-light footer{background:#070f1a}

/* final CTA card: keep the dark tilt-card as its own world (sea renders behind it) */
body.kd-light .final-card{
  --text:#eef1fb; --muted:#9aa3c0; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --cyan:#3ee6c8; --violet:#38bdf8; --pink:#ffd382;
  --grad:linear-gradient(92deg,#3ee6c8 0%,#38bdf8 52%,#ffd382 100%);
  --wash-rgb:255,255,255; --sky-rgb:56,189,248; --cyan-rgb:62,230,200; --amber-rgb:255,211,130;
  --scrim4-rgb:5,7,15; --c-ffffff:#ffffff; --c-707a99:#707a99; --c-0b0f1e:#0b0f1e;
  --shadow-rgb:0,0,0;
  background:linear-gradient(180deg,#0b1524,#070f1a)}
body.kd-light .final-card .btn-primary{color:#fff}

/* ---- round 2 fixes ---- */
/* dark bands inherit computed ink from body — pin their own colour to the re-pinned token */
body.kd-light .final-card{color:var(--text)}
body.kd-light .final-card{--c-0d1728:#0d1728;--c-0a1220:#0a1220;--muted:#9aa3c0}
/* hero app lit block: white text was for the dark theme */
body.kd-light .ha-block.is-lit{color:var(--text)}
/* td showstopper CHROME only (mock content untouched): the section's styles are
   deliberately untokenised, so skin the frame explicitly for light */
body.kd-light .td-watch{color:#0d947f}
body.kd-light .td-pulse{box-shadow:0 0 10px rgba(13,148,127,.5)}
body.kd-light .td-browser{background:#fff;border-color:rgba(16,24,40,.14);
  box-shadow:0 3px 8px rgba(30,41,66,.06),0 30px 80px rgba(30,41,66,.16)}
body.kd-light .td-bbar{background:#eef1f6;border-bottom-color:rgba(16,24,40,.10)}
body.kd-light .td-url{background:#fff;border-color:rgba(16,24,40,.12);color:#60708a}
body.kd-light .td-cap-r{color:#5d6880}
body.kd-light .td-cap-r a{color:#1f7bd0}
body.kd-light .td-seg{background:#fff;border-color:rgba(16,24,40,.17)}
body.kd-light .td-seg button{color:#56607a}
body.kd-light .td-seg button.on{background:#0d947f;color:#fff}
body.kd-light .td-seg button.replay{color:#1f7bd0}
/* map wash */
body.kd-light .mp-fill{fill:rgba(13,148,127,.07)}


/* ---- round 3 (Andrew's list, 08-22) ---- */
/* nav: translucent dark over paper read lighter than its own dropdown — go solid, match the sub */
/* grid: was ink at .035 — invisible on paper. Blueprint rules at brand blue */
body.kd-light .grid-lines{opacity:1;
  background-image:linear-gradient(rgba(31,123,208,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(31,123,208,.055) 1px,transparent 1px)}
body.kd-light .grid-lines::after{
  background-image:linear-gradient(rgba(31,123,208,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(31,123,208,.11) 1px,transparent 1px)}


/* ---- round 4 ---- */
/* nav hairline: dark-on-dark it was a bookend; on paper it cut a 1px seam across the open dropdown */
body.kd-light .nav::after{display:none}
/* sea canvases composite normally in light — the shader supplies ink colours (wave.js uLight) */
body.kd-light #fx-sea,body.kd-light #fx-sea-hero{mix-blend-mode:normal;filter:none;opacity:1}
/* theme toggle (always styled — button ships in the nav) */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);color:#eef1fb;background:rgba(255,255,255,.06);cursor:pointer;
  font-size:15px;line-height:1;transition:border-color .25s,background .25s;flex:0 0 auto}
.theme-toggle:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.12)}
.mobile-menu .theme-toggle{margin-top:1.4rem;align-self:flex-start}
/* hero app hover sheen: dark uses --panel2 as a translucent white sheen; light's --panel2 is a
   solid surface, which painted an opaque blob over the card copy (Andrew's blur report). Ink tint instead */
body.kd-light .hero-app::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(16,24,40,.05),transparent 62%)}

/* ---- 1.9.35 ---- */
/* mobile: toggle lives in the burger menu, not the nav bar */
@media (max-width:880px){.nav-inner .theme-toggle{display:none}}

/* ---- 1.9.36 ---- */
body.kd-light .guar-card,body.kd-light .stat-card{background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(30,41,66,.04),0 10px 28px rgba(30,41,66,.05)}
body.kd-light .price-card:hover,body.kd-light .stat-card:hover,body.kd-light .guar-card:hover{
  box-shadow:0 3px 6px rgba(30,41,66,.06),0 22px 44px rgba(30,41,66,.10)}
body.kd-light .ticker{background:#fff}
/* about is LIGHT now — the founder frame keeps its own dark art inside the white card */
body.kd-light #about .fs-frame{background:#fff}

/* ---- 1.9.37: light nav — frosted paper, ink links (the dark bar jarred against the light page) ---- */
body.kd-light .nav{background:rgba(251,252,254,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 1px 0 rgba(16,24,40,.08)}
body.kd-light .nav-links{color:var(--muted)}
body.kd-light .nav-links a:hover{color:var(--text)}
body.kd-light .nav .logo-word{color:var(--text)}
body.kd-light .nav .logo-mark{filter:none}
body.kd-light .nav .sub{background:#ffffff;border:1px solid rgba(16,24,40,.10);border-top:none;
  box-shadow:0 24px 60px rgba(30,41,66,.16)}
body.kd-light .nav .sub a{color:var(--muted)}
body.kd-light .nav .sub a:hover{background:rgba(16,24,40,.05);color:var(--text)}
body.kd-light .nav .sub .sub-all{color:var(--cyan);border-top-color:rgba(16,24,40,.10)}
body.kd-light .nav .theme-toggle{border-color:rgba(16,24,40,.22);color:var(--text);background:rgba(16,24,40,.04)}
body.kd-light .nav .theme-toggle:hover{border-color:rgba(16,24,40,.4);background:rgba(16,24,40,.08)}
/* mobile menu follows the nav into the light */
body.kd-light .mobile-menu{background:#f7f8fb;color:var(--text)}
body.kd-light .mobile-menu a{color:var(--text);border-bottom-color:rgba(16,24,40,.10)}
body.kd-light .mobile-menu .mm-acc{color:var(--text);border-bottom-color:rgba(16,24,40,.10)}
body.kd-light .mobile-menu .mm-sub{color:var(--muted)}
body.kd-light .mobile-menu .theme-toggle{border-color:rgba(16,24,40,.22);color:var(--text);background:rgba(16,24,40,.04)}
/* hero ticker: paper glass over the wave */
body.kd-light .hero-ticker{background:rgba(251,252,254,.72)}
/* merged founder card */
body.kd-light .founder-card{background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(30,41,66,.04),0 12px 32px rgba(30,41,66,.07)}

/* ---- 1.9.38 ---- */
/* stat band = the mid-page dark punctuation in light mode (colour blocking) */
body.kd-light .stat-band{color:var(--text)}
body.kd-light .stat-band{--text:#eef1fb;--muted:#9aa3c0;--line:rgba(255,255,255,.09);
  --grad:linear-gradient(92deg,#3ee6c8 0%,#38bdf8 52%,#ffd382 100%);
  --c-0b1524:#0b1524;--c-070f1a:#070f1a;
  background:linear-gradient(180deg,#0b1524,#070f1a);border-top:0;border-bottom:0}
/* film strip cards: white on paper */
body.kd-light .ds-card{background:#fff;border-color:rgba(16,24,40,.12);
  box-shadow:0 3px 8px rgba(30,41,66,.07),0 18px 44px rgba(30,41,66,.12)}
body.kd-light .ds-card:hover{box-shadow:0 6px 12px rgba(30,41,66,.08),0 26px 60px rgba(30,41,66,.16)}
body.kd-light .ds-bar{background:#eef1f6;border-bottom-color:rgba(16,24,40,.10)}
body.kd-light .ds-bar em{color:#60708a}
body.kd-light .ha-screen{border-color:rgba(16,24,40,.10)}