/* ============================================================
   LIGHT THEME (preview)
   Dark is the default and needs nothing from this file. Every rule
   here is scoped to html[data-theme="light"], set by the inline head
   script on each page and flipped by the toggle in /theme.js.

   Light palette is the paper palette the notes already use:
   ink #14222e / #3c4a52 / #6b7684 on cream, teal-deep #1c6e6e,
   gold #e0a400 for small dots. The yellow token stays #f5c842.
   ============================================================ */

html[data-theme="light"] {
  color-scheme: light;
  --teal-0: #fbf7ee;
  --teal-1: #f6efe0;
  --teal-2: #ede3cd;
  --cream: #14222e;
  --cream-soft: rgba(20, 34, 46, 0.78);
  --cream-faint: rgba(20, 34, 46, 0.58);
  --accent: #1c6e6e;
  --rule: rgba(20, 34, 46, 0.16);
  --gold-ink: #8a5f00;
  --line-ink: #1b3a5c; /* the mark and line art: navy, crisp against the yellow dot */
}

/* Surfaces that stay as they are in light mode: the paper sheets keep
   their cream ink tokens, the deep-sea panels stay dark. */
html[data-theme="light"] .paper,
html[data-theme="light"] .dive,
html[data-theme="light"] .fig-dark,
html[data-theme="light"] section.method .wrap,
html[data-theme="light"] section.pull .wrap {
  --cream: #f4ead5;
  --cream-soft: rgba(244, 234, 213, 0.72);
  --cream-faint: rgba(244, 234, 213, 0.5);
  --accent: #5fa8a8;
  --rule: rgba(244, 234, 213, 0.14);
  --line-ink: #f4ead5;
}

/* ---------- grounds ----------
   Light keeps the descent story: warm paper at the surface, sea-glass
   shallows through the middle, and the page still lands in deep teal
   at the footer. Graph-paper grid is the lab's own texture (same grid
   as the notes paper). */
html[data-theme="light"] body {
  background: linear-gradient(180deg,
    #fbf7ee 0%, #f7f0e1 22%, #eef0e6 46%, #e2ece7 68%, #d5e6e1 86%, #cfe2dd 100%);
}
html[data-theme="light"] .hero {
  background:
    radial-gradient(ellipse at 50% 42%, #fffdf7 0%, #f8f2e4 58%, #ecebdc 100%);
}
html[data-theme="light"] .hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(28, 110, 110, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 110, 110, 0.10) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, transparent 22%, #000 78%);
          mask-image: radial-gradient(ellipse at 50% 45%, transparent 22%, #000 78%);
}
html[data-theme="light"] .grain { opacity: 0.10; mix-blend-mode: multiply; }
html[data-theme="light"] .vignette {
  background: radial-gradient(ellipse at center, transparent 55%, rgba(28, 80, 80, 0.10) 100%);
}

/* section openers get a short teal rule so the page has rhythm */
html[data-theme="light"] section.block { border-top: none; position: relative; }
html[data-theme="light"] section.block + section.block::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(884px, calc(100% - 56px)); height: 1px;
  background: linear-gradient(90deg, rgba(28,110,110,0) 0%, rgba(28,110,110,0.35) 18%, rgba(28,110,110,0.35) 82%, rgba(28,110,110,0) 100%);
}
html[data-theme="light"] section.method + section.block::before,
html[data-theme="light"] section.block + section.method::before { display: none; }

/* cards: white-glass tiles with a teal top edge */
html[data-theme="light"] .pillar,
html[data-theme="light"] .comp,
html[data-theme="light"] .case-card {
  background: rgba(255, 253, 247, 0.72);
  border: 1px solid rgba(20, 34, 46, 0.08);
  border-top: 3px solid #1c6e6e;
  border-radius: 8px;
  padding: 20px 22px 22px;
  box-shadow: 0 10px 26px rgba(28, 80, 80, 0.07);
}
html[data-theme="light"] .pillars { gap: 18px 20px; }

/* the footer stays deep teal: the page still lands in the deep */
html[data-theme="light"] footer.site,
html[data-theme="light"] footer.deep {
  --cream: #f4ead5;
  --cream-soft: rgba(244, 234, 213, 0.72);
  --cream-faint: rgba(244, 234, 213, 0.5);
  --accent: #5fa8a8;
  --rule: rgba(244, 234, 213, 0.14);
  --line-ink: #f4ead5;
  background: #0d3a3f;
  color: var(--cream);
  border-top: none;
}

/* ---------- line art: anything drawn in cream becomes ink ---------- */
html[data-theme="light"] svg [stroke="#f4ead5"] { stroke: var(--line-ink); }
html[data-theme="light"] svg [fill="#f4ead5"] { fill: var(--line-ink); }
html[data-theme="light"] svg [stroke="#5fa8a8"] { stroke: var(--accent); }
html[data-theme="light"] .scene .dot-trapped,
html[data-theme="light"] .scene .dot-wander { fill: #c9bc9c; }
html[data-theme="light"] .mini-sub g { stroke: rgba(20, 34, 46, 0.5); }
html[data-theme="light"] .sub [fill="#16213c"] { fill: #f6efe0; }
html[data-theme="light"] .dive .sub [fill="#16213c"],
html[data-theme="light"] .fig-dark [fill="#16213c"] { fill: #16213c; }

html[data-theme="light"] footer.site .learn-link { color: #f5c842; }

/* ---------- small dots: gold reads better than pale yellow on cream ---------- */
html[data-theme="light"] .eyebrow::before,
html[data-theme="light"] .pillar h3::before,
html[data-theme="light"] .notes .note-tag::before,
html[data-theme="light"] .depth::before { background: #e0a400; }

/* ---------- yellow text becomes gold ink ---------- */
html[data-theme="light"] .cred .learn-link,
html[data-theme="light"] .notes .learn-link,
html[data-theme="light"] .pillar .prod-link,
html[data-theme="light"] .learn-link,
html[data-theme="light"] .prod-link {
  color: var(--gold-ink);
  border-bottom-color: rgba(138, 95, 0, 0.4);
}
html[data-theme="light"] .cred .learn-link:hover,
html[data-theme="light"] .notes .learn-link:hover,
html[data-theme="light"] .pillar .prod-link:hover { color: #5e4100; }
html[data-theme="light"] .notes a.note-item:hover .note-title,
html[data-theme="light"] .notes .logbook-row:hover .note-title { color: var(--gold-ink); }
html[data-theme="light"] .policy a,
html[data-theme="light"] a[style*="var(--yellow)"] { color: var(--gold-ink) !important; border-bottom-color: rgba(138, 95, 0, 0.4) !important; }
html[data-theme="light"] a.entry:hover .t { color: var(--gold-ink); }
html[data-theme="light"] a.entry .m::after { color: var(--gold-ink); }
html[data-theme="light"] .notes .note-status.live { color: var(--gold-ink); border-color: rgba(138, 95, 0, 0.45); }

/* ---------- the cream highlight cards invert to deep teal ---------- */
html[data-theme="light"] section.method .wrap,
html[data-theme="light"] section.pull .wrap {
  background: #0d3a3f;
  box-shadow: 0 26px 60px rgba(13, 58, 63, 0.28);
}
html[data-theme="light"] section.method .eyebrow,
html[data-theme="light"] section.pull .eyebrow { color: #5fa8a8; }
html[data-theme="light"] section.method .eyebrow::before,
html[data-theme="light"] section.pull .eyebrow::before { background: #f5c842; }
html[data-theme="light"] section.method blockquote,
html[data-theme="light"] section.method blockquote .y,
html[data-theme="light"] section.pull blockquote,
html[data-theme="light"] section.pull blockquote .y { color: #f4ead5; }
html[data-theme="light"] section.method p,
html[data-theme="light"] section.pull p { color: rgba(244, 234, 213, 0.78); }

/* ---------- paper sheets sit on cream instead of the deep ---------- */
html[data-theme="light"] .paper-wrap { filter: drop-shadow(0 14px 34px rgba(60, 48, 20, 0.16)); }
html[data-theme="light"] .paper { box-shadow: 0 0 0 1px rgba(20, 34, 46, 0.08); }

/* ============================================================
   The toggle (injected by /theme.js on every page)
   ============================================================ */
.theme-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(8, 39, 43, 0.82); color: #f4ead5;
  border: 1px solid rgba(244, 234, 213, 0.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  cursor: pointer; transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.theme-toggle:hover { transform: translateY(-1px); border-color: #5fa8a8; }
.theme-toggle:focus-visible { outline: 2px solid #f5c842; outline-offset: 3px; }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .i-moon { display: none; }
html[data-theme="light"] .theme-toggle {
  background: rgba(251, 247, 238, 0.9); color: #14222e;
  border-color: rgba(20, 34, 46, 0.2);
}
html[data-theme="light"] .theme-toggle .i-moon { display: block; }
html[data-theme="light"] .theme-toggle .i-sun { display: none; }
@media print { .theme-toggle { display: none; } }

/* ---------- /network ---------- */
html[data-theme="light"] .step::before { color: #c48f00; }
html[data-theme="light"] .send-card {
  background: rgba(255, 253, 247, 0.72);
  border-color: rgba(20, 34, 46, 0.1);
  box-shadow: 0 10px 26px rgba(28, 80, 80, 0.07);
}
html[data-theme="light"] .net-art .halo { opacity: 0.28; }

/* ---------- Decon in light mode: solid, in two navy tones ----------
   Hull in brand navy with a darker keel line; tower, fins, rudder and lamp
   housing a step lighter so the parts read; portholes cream with a steel rim.
   Only the free-standing subs (homepage logbook row, 404). The dive overlay
   and the porthole figure keep their dark water, so they stay as drawn. */
html[data-theme="light"] .notes .logbook-row .mini-sub { opacity: 0.95; }
html[data-theme="light"] :is(svg.mini-sub, svg.sub) g { stroke: #0f2338; }
html[data-theme="light"] :is(svg.mini-sub, svg.sub) rect { fill: var(--line-ink); }
html[data-theme="light"] :is(svg.mini-sub, svg.sub) path[d^="M270"],
html[data-theme="light"] :is(svg.mini-sub, svg.sub) path[d^="M186"],
html[data-theme="light"] :is(svg.mini-sub, svg.sub) ellipse,
html[data-theme="light"] :is(svg.mini-sub, svg.sub) circle[cx="462"][r="16"] { fill: #3a6690; stroke: #0f2338; }
html[data-theme="light"] :is(svg.mini-sub, svg.sub) path[d^="M300"] { stroke: var(--line-ink); }
html[data-theme="light"] :is(svg.mini-sub, svg.sub) circle[cx="245"],
html[data-theme="light"] :is(svg.mini-sub, svg.sub) circle[cx="395"] { fill: #f6efe0; stroke: #8fb3d1; }