/* Telling Technology theme layer.
   Dark = default: NOTHING in this file may alter rendering when data-theme is absent
   (toggle button styling excepted). Light = html[data-theme="light"], set pre-paint
   by an inline head script. */

/* ---------- toggle button ---------- */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:999px;
  border:1px solid var(--card-brd);background:var(--card);
  color:var(--muted);cursor:pointer;padding:0;
  transition:color .2s,border-color .2s;
}
.theme-toggle:hover{color:var(--teal-bright);border-color:var(--teal-deep)}
.theme-toggle svg{width:17px;height:17px;display:block}
.theme-toggle-float{position:fixed;right:18px;bottom:18px;z-index:50;background:var(--bg-2)}

/* ---------- copy button (injected by theme.js on .install snippets) ----------
   JS-injected element, so — like the toggle above — exempt from the
   "nothing alters default rendering" rule. .install is an always-dark island,
   so the island's re-darkened vars keep the button correct in light mode. */
.copy-btn{
  display:inline-flex;align-items:center;flex:0 0 auto;
  margin-left:auto;
  font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);background:var(--card);border:1px solid var(--card-brd);
  border-radius:7px;padding:5px 11px;cursor:pointer;
  transition:color .2s,border-color .2s;
}
.copy-btn:hover{color:var(--teal-bright);border-color:var(--teal-deep)}
.copy-btn.copied{color:var(--green);border-color:var(--green)}

/* NOTE: no html:not([data-theme]) rules — default state must stay byte-identical. [R8] */

/* ---------- light theme tokens ---------- */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#F4EFE7;
  --bg-2:#ECE5D8;
  --ink:#211E19;
  --muted:#736B5E;
  --faint:#9A9284;
  --teal:#0B7D7E;
  --teal-bright:#0A6E6F;
  --teal-deep:#0EA5A6;
  --amber:#8A6D1F;
  --green:#2E7D4F;
  --coral:#C8613D;
  --card:rgba(33,30,25,.07);        /* [R14] stronger than v01 */
  --card-brd:rgba(33,30,25,.18);    /* [R14] */
  /* --term NOT overridden: terminal cards stay dark by design */
}

/* ---------- always-dark islands: keep dark surface, re-darken fg tokens [R4] ---------- */
html[data-theme="light"] .term,
html[data-theme="light"] .hero-art .badge,
html[data-theme="light"] .install,
html[data-theme="light"] .lb,
html[data-theme="light"] .lb-prompt,
html[data-theme="light"] .lb-close,
html[data-theme="light"] .lb-nav,
html[data-theme="light"] .lightbox,
html[data-theme="light"] .shot .pin,
html[data-theme="light"] .shot.zoomable,
html[data-theme="light"] .gallery figure,
html[data-theme="light"] .capture-form input{
  --ink:#eaf3f1;--muted:#8aa19c;--faint:#5d716d;
  --card:rgba(255,255,255,.035);
  --card-brd:rgba(255,255,255,.09);
  --teal-bright:#2ee6d6;--green:#74D99B;--amber:#F8E29B;--coral:#F5A8A2;
}
html[data-theme="light"] .capture-form input{color:#eaf3f1;caret-color:#2ee6d6}

/* ---------- buttons: bright fill pinned, dark text kept [R2] ---------- */
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .nav a.cta,
html[data-theme="light"] .cp-btn-live{
  background:#2ee6d6;
  color:#04201f;
}

/* ---------- gradient-clipped display text [R1][R11] ---------- */
html[data-theme="light"] .hero h1,
html[data-theme="light"] .cliff h2,
html[data-theme="light"] .code{
  background:linear-gradient(180deg,#211E19,#3A5750);
  -webkit-background-clip:text;background-clip:text;
}

/* ---------- sticky site header lightens [R5] ---------- */
html[data-theme="light"] .site-head{
  background:rgba(244,239,231,.85);
  border-bottom:1px solid rgba(33,30,25,.08);
}

/* ---------- atmosphere + depth ---------- */
html[data-theme="light"] .blob{opacity:.22}
html[data-theme="light"] .grain{opacity:.05}
html[data-theme="light"] .hero-art img{
  box-shadow:0 20px 60px rgba(40,30,20,.18),0 0 0 1px var(--card-brd);
}
html[data-theme="light"] .term{box-shadow:0 16px 40px rgba(40,30,20,.18)}
html[data-theme="light"] .hero-art .badge{box-shadow:0 12px 30px rgba(40,30,20,.2)}
/* crafted-not-flat: cards get soft elevation in light [R14] */
html[data-theme="light"] .card,
html[data-theme="light"] .tile,
html[data-theme="light"] .ep-card,
html[data-theme="light"] .case-card{
  box-shadow:0 1px 2px rgba(40,30,20,.05),0 10px 28px -14px rgba(40,30,20,.18);
}

/* EXTEND HERE with any additional selectors from the Task 1 audit.
   Added by audit: .lb / .lightbox islanded so lightbox caption heading + label stay light on the
   dark overlay; .shot.zoomable islanded for the hover ⤢ affordance; .ep-card/.case-card elevated. */