/* LiteLedger — shared marketing-page stylesheet.
   ---------------------------------------------------------------------------
   The pre-login pages (landing, how-it-works, litellm-setup, local-ai, primer,
   sample-report, security) each carried a byte-identical copy of the design
   tokens and the whole nav / mobile-menu chrome in their own inline <style>.
   This file is the single copy; each page links it BEFORE its inline <style>,
   so anything a page still declares inline continues to win exactly as before.

   Extraction was mechanical and rendering-neutral: only rules proven identical
   across all seven pages were moved, and no (local, shared) pair changes which
   declaration wins — at-rule interiors included.

   These tokens are the dark ("DarkLedger") base, and deliberately use the SAME
   names as the app's design.css, whose html[data-theme="light"] block already
   defines a light value for every one of them. A light marketing theme is
   therefore a token block added here, not a per-page rewrite.

   NOTE: teaser.html (/early) is not on this stylesheet — it shares only three
   rules and lacks a .brand rule, so linking it in would change its rendering.

   Served by an explicit route in web/app.py (there is no StaticFiles mount).
*/

:root {
  --bg: #0a0908;
  --surface: #141210;
  --surface2: #1c1915;
  --border: rgba(240,235,224,0.1);
  --border-strong: rgba(240,235,224,0.18);
  --text: #f0ebe0;
  --text-muted: #8a8278;
  --text-dim: #4d4840;
  --amber: #d4901a;
  --amber-light: #f0b84a;
  --green: #52a876;
  --red: #c94040;
  --orange: #c4703a;

  /* Nav surfaces. Both were hardcoded --bg-at-alpha before the light theme
     existed; the blur behind them means they can't just be var(--bg). */
  --nav-bg: rgba(10,9,8,0.92);
  --nav-bg-solid: rgba(10,9,8,0.98);
  /* Subtle ink wash (inline code, chips). Cream-on-dark here, ink-on-cream in
     the light block — the one that goes invisible if left as a literal. */
  --chip-bg: rgba(240,235,224,0.05);
  /* Accent wash + edge for amber-tinted icon tiles. Faint over dark; the same
     alpha over cream is nearly invisible, so light lifts both. */
  --accent-wash: rgba(212,144,26,0.08);
  --accent-edge: rgba(212,144,26,0.25);
  /* Amber used as READING text (links, inline code, section labels, the
     wordmark's "Lite") rather than as a mark or a fill. Byte-identical to
     --amber here, so swapping a dark literal for it changes nothing; only the
     light block gives it a distinct, legible-on-cream value. */
  --amber-text: #d4901a;

  /* Diagram ink ramp. The inline SVGs shade their non-accent parts with six
     fixed greys; these name the two ends and the in-between steps so the light
     block can invert the ramp. Dark values are the literals themselves, so the
     bridge at the bottom of this file is a no-op in dark. */
  --ink-2: #c4bcae;
  --ink-3: #a8a094;
  --ink-5: #7a7264;
  --ink-6: #5a544a;

  /* ── Brand channels, without the alpha ────────────────────────────────────
     The pages tint these four colours at roughly twenty different alphas
     apiece (washes, hairlines, pill fills). Naming every alpha would mean
     twenty tokens per colour; holding the CHANNELS instead lets one token
     serve all of them: rgba(var(--amber-rgb), 0.04). Values here are the
     literals they replaced, so dark is unmoved. */
  --amber-rgb: 212,144,26;
  --ink-rgb:   240,235,224;
  --green-rgb:  82,168,118;
  --red-rgb:   201,64,64;

  /* Accent variants that appear as their own hex rather than as a tint. */
  --green-light: #7bc9a0;   /* .tag-green label */
  --green-soft:  #5fb886;   /* sample-report marks */
  --green-soft-rgb: 95,184,134;
  --red-light:   #e08080;   /* .tag-red label */
  --purple:      #b28adf;
  --purple-rgb:  178,138,223;
  --orange-rgb:  196,112,58;
  --orange-light: #e09060;  /* .tag-orange label */
  /* Translucent surface + inset shadow on the pipeline infographic. Black at
     alpha is a DARK-theme shadow; on cream it has to become ink at a much
     lower alpha or the card reads as bruised. */
  --surface-rgb: 20,18,16;
  --shadow-inset: rgba(0,0,0,0.28);
  /* Elevation for a panel that floats OVER the page (the nav's Product menu).
     Opposite direction to --shadow-inset's job: on a near-black page a black
     shadow barely registers, so dark runs it hard and leans on the border for
     the actual edge; on cream the same alpha would bruise, so light runs it
     soft and the shadow does the separating. */
  --shadow-pop: rgba(0,0,0,0.55);
  /* Amber as a FILL with page-coloured text on top (CTA buttons). Separate
     from --amber because the contrast requirement runs the other way: here the
     amber is the background and --bg is the ink, so the fill has to be dark
     enough for cream to read on it. Identical to --amber in dark. */
  --cta-bg: #d4901a;
}

/* ── Light ("LightLedger") ──────────────────────────────────────────────────
   Values are lifted verbatim from design.css's html[data-theme="light"] block
   so the marketing site and the app are the same light theme, not two that
   merely look alike. Dark is the ABSENCE of data-theme, matching the SPA, so
   an unset or unrecognised preference falls through to dark on its own.

   A page opts in by carrying class="theme-ready" on <html>. Pages still
   inlining dark-only literals simply never receive the attribute (see the
   bootstrap in each page's <head>), so this block cannot reach them
   mid-rollout. */
html[data-theme="light"] {
  --bg: #fbf8f1;
  --surface: #ffffff;
  --surface2: #f4efe3;
  --border: rgba(30,25,20,0.10);
  --border-strong: rgba(30,25,20,0.22);
  --text: #1c1915;
  --text-muted: #6b6258;
  --text-dim: #a89e90;
  --amber: #a8700e;
  /* design.css maps this to #c68a1a — literally "lighter", which inverts what
     the token is FOR. In dark, --amber-light is the higher-contrast amber
     (brighter than --amber against a near-black page). On cream, more contrast
     means DARKER, so the naive mapping makes the one amber meant to stand out
     the hardest to read: 2.81:1, and it carries pill labels and hover text.
     Same role, opposite direction. */
  --amber-light: #94620b;
  --green: #2d7a52;
  --red: #a83030;
  --orange: #a85a28;

  --nav-bg: rgba(255,253,247,0.92);
  --nav-bg-solid: #ffffff;
  --chip-bg: rgba(30,25,20,0.06);
  --accent-wash: rgba(168,112,14,0.12);
  --accent-edge: rgba(168,112,14,0.34);
  /* design.css's --amber (#a8700e) is a MARK colour: 3.97:1 on this cream, so
     it reads fine as an icon or a rule and fails as body text. This is the
     same amber taken down until it clears 4.5:1 on all three light surfaces —
     page 4.94, card 5.24, code chip 4.56. The shared tokens stay verbatim from
     design.css; only the reading-text role gets its own value. */
  --amber-text: #94620b;

  --ink-2: #3f382f;
  --ink-3: #6b6258;
  --ink-5: #8a8076;
  --ink-6: #a89e90;

  /* The cream channel inverts to ink — this is the pair that makes a wash a
     wash in both directions instead of vanishing. The accents darken. */
  --amber-rgb: 168,112,14;
  --ink-rgb:   30,25,20;
  --green-rgb:  45,122,82;
  --red-rgb:   168,48,48;

  /* These three carry label TEXT, so they're taken down far enough to read on
     cream rather than merely being "the light version" of the dark hue. */
  --green-light: #1f6b45;
  --green-soft:  #26704a;
  --green-soft-rgb: 38,112,74;
  --red-light:   #8f2323;
  --purple:      #5b3a8f;
  --purple-rgb:  91,58,143;
  --orange-rgb:  168,90,40;
  --orange-light: #8f4a1c;
  --surface-rgb: 255,255,255;
  --shadow-inset: rgba(30,25,20,0.10);
  --shadow-pop: rgba(30,25,20,0.14);
  --cta-bg: #94620b;
}

/* Tells the browser which way to paint scrollbars and form controls. Gated on
   .theme-ready rather than bare html: these pages declared no color-scheme at
   all before, so a dark page got light scrollbars, and correcting that is a
   visible change. Letting it ride the same opt-in as the rest keeps pages that
   haven't converted yet exactly as they are. */
html.theme-ready { color-scheme: dark; }
html.theme-ready[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg); scroll-behavior: smooth; }

.serif { font-family: 'Fraunces', Georgia, serif; }

section[id] { scroll-margin-top: 72px; }

/* Nav */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo-swap { position: relative; display: inline-block; line-height: 0; flex-shrink: 0; }

.nav-logo-swap img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.nav-logo-swap .nav-logo-rest { opacity: 1; transition: opacity .22s ease; }

.nav-logo-swap:hover .nav-logo-rest { opacity: 0; }

@media (prefers-reduced-motion: reduce) { .nav-logo-swap:hover .nav-logo-rest { opacity: 1; } }

.brand-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 32px;
  list-style: none;
}

@media (min-width: 900px) { .nav-links { display: flex; } }

.nav-links a {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.nav-links a:hover { color: var(--text); }

.nav-links a.active { color: var(--amber); }

/* ── Product menu ───────────────────────────────────────────────────────────
   Five of the seven destinations live behind one trigger. The strip used to
   carry all seven as flat 13px labels — 669px of undifferentiated grey across
   a 1120px bar, four of them two words long — which is what made the header
   read as crowded and gave the eye no entry point. Collapsing the five
   "what is it / what do I get" pages into a panel takes the strip to ~210px
   and leaves three short words, so the brand and the CTA get to be the two
   things you actually see first.

   The panel is a real menu, not a hover tooltip: it opens on hover for a mouse
   AND on click/Enter/Space for everything else, closes on Escape, on an
   outside click, and on focus leaving the group. `visibility` is animated
   alongside opacity so the links are genuinely unreachable while closed —
   opacity alone would leave five invisible tab stops in the header. */

.nav-group { position: relative; display: flex; align-items: center; }

.nav-group-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: inherit;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s;
}

.nav-group-trigger:hover,
.nav-group[data-open="true"] .nav-group-trigger { color: var(--text); }

/* The trigger stands in for whichever child page you're on, so it carries the
   current-page amber the way a flat link would. */
.nav-group-trigger.active { color: var(--amber); }

.nav-caret {
  width: 10px; height: 10px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}

.nav-group[data-open="true"] .nav-caret { transform: rotate(180deg); }

.nav-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: 320px;
  padding: 8px;
  background: var(--nav-bg-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 44px var(--shadow-pop);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

/* The 14px of air between trigger and panel is dead space a pointer has to
   cross, and crossing it would fire mouseleave and shut the menu. This pad
   makes the gap part of the panel's own hover area. */
.nav-panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -14px;
  height: 14px;
}

.nav-group[data-open="true"] .nav-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-panel a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.13s;
}

.nav-panel a:hover,
.nav-panel a:focus-visible { background: var(--chip-bg); }

.np-title {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.np-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

.nav-panel a.active .np-title { color: var(--amber); }

.nav-actions { display: flex; align-items: center; gap: 16px; }

.btn-ghost {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.btn-ghost:hover { color: var(--text); }

/* The header's one control reads "Sign in" for a visitor who isn't signed in
   and "Dashboard" for one who is — same href either way, since /dashboard
   sends an anonymous visitor to the login page anyway. It said "Sign in" to
   everyone for as long as these pages have existed, which is only wrong for
   the reader who is already signed in, and therefore only wrong for the
   readers who see it most.

   Both labels ship in the HTML and CSS picks one, keyed on data-auth, which
   each page's inline <head> bootstrap sets before first paint. Rewriting the
   text from marketing.js instead would flip the header a beat AFTER it
   painted. display:none also keeps the unused label out of the accessibility
   tree, so a screen reader hears one label, not both.

   Two classes on purpose, exactly as with the hamburger below: a page's
   inline <style> loads after this file, so a single-class rule here can be
   taken back silently. scripts/check_marketing_nav.py holds the line. */
.nav-signin .signin-in { display: none; }
html[data-auth="in"] .nav-signin .signin-out { display: none; }
html[data-auth="in"] .nav-signin .signin-in { display: inline; }

/* The hamburger's DISPLAY is owned here, and deliberately through two classes.
   Every page also declares a single-class `.nav-toggle { display: none }` in
   its own inline <style>, and that <style> loads AFTER this file — equal
   specificity, later source wins — so the single-class rule this file used to
   carry in the max-width:899px block was silently dead. The button was
   display:none at every width on all seven pages, and because .nav-links is
   also hidden below 900px, a phone got a header holding a logo, a theme
   toggle, and no way to reach any other page. Two classes outrank one
   regardless of order, which is what makes this stick.

   scripts/check_marketing_nav.py fails if a page takes `display` back. */
.nav-actions .nav-toggle { display: none; }

.nav-toggle:hover { border-color: var(--amber); }

.nav-toggle svg { display: block; width: 20px; height: 20px; stroke: var(--text); }

.nav-toggle .icon-close { display: none; }

.nav-toggle[aria-expanded="true"] .icon-open { display: none; }

.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-menu {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 49;
  background: var(--nav-bg-solid);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 16px 20px 24px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}

.mobile-menu.open { display: block; }

.mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }

.mobile-menu a {
  display: block;
  padding: 14px 4px;
  font-size: 15px;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color 0.15s;
}

.mobile-menu .mm-signin:hover { background: var(--cta-bg); color: var(--bg); }

/* The drawer has always carried aria-current on the page you're on and never
   painted it — the current-page cue existed on desktop only. */
.mobile-menu a.active { color: var(--amber); }

/* The drawer keeps the list FLAT — the desktop panel exists to buy horizontal
   room, and a drawer has none of that pressure. What it borrows from the panel
   is the grouping: one eyebrow over the five product pages so the list reads
   as two ideas rather than seven equal errands. */
.mobile-menu .mm-label {
  padding: 16px 4px 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.mobile-menu .mm-label:first-child { padding-top: 4px; }

/* Section label */

.section-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
}

@media (max-width: 899px) {
  .nav-inner { padding: 0 16px !important; }
  .nav-actions .nav-toggle { display: inline-flex; }
  .nav-actions .btn-ghost { display: none !important; }
}

/* ── Theme toggle ───────────────────────────────────────────────────────────
   Sits in .nav-actions beside the sign-in link, and again inside the mobile
   menu. Icon-only on desktop; the mobile copy carries a text label because the
   menu is a list of words. */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}

.theme-toggle:hover { color: var(--text); border-color: var(--amber); }

.theme-toggle svg { width: 17px; height: 17px; display: block; }

/* One button, two glyphs: show the mode it will switch TO, so the icon reads
   as an action rather than a status. */
.theme-toggle .icon-light { display: none; }
.theme-toggle .icon-dark { display: block; }
html[data-theme="light"] .theme-toggle .icon-light { display: block; }
html[data-theme="light"] .theme-toggle .icon-dark { display: none; }

.mobile-menu .theme-toggle {
  width: 100%;
  height: auto;
  gap: 10px;
  justify-content: flex-start;
  padding: 10px 12px;
  margin-top: 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text-muted);
}

.theme-toggle-label { display: none; }
.mobile-menu .theme-toggle-label { display: inline; }

/* The mark is a flat SVG file, so CSS can't recolor its insides — swap the
   whole file. `content` on an <img> replaces the rendered image while leaving
   the element's alt text and layout box alone. */
html[data-theme="light"] .nav-logo-rest,
html[data-theme="light"] .footer-logo {
  content: url("/static/logo-mark-light.svg");
}
html[data-theme="light"] .nav-logo-active {
  content: url("/static/logo-mark-active-light.svg");
}

/* ── Product screenshots stay dark ─────────────────────────────────────────
   The two framed mockups on the landing page are pictures OF the app, and
   the app is dark by default. A dark screenshot sitting on a light marketing
   page is correct — repainting it would show visitors a product that does
   not look like what they will get.

   Rather than exempting each rule inside them, the whole dark token set is
   re-declared on the container, so every descendant — CSS var() reads and
   the SVG bridge alike, since the bridge also resolves through tokens —
   inherits dark values while the page around it is light.

   Generated from the :root block above; check_marketing_theme.py asserts the
   two declare exactly the same token names, so this cannot silently drift.
*/
html[data-theme="light"] .mock-win {
  --bg: #0a0908;
  --surface: #141210;
  --surface2: #1c1915;
  --border: rgba(240,235,224,0.1);
  --border-strong: rgba(240,235,224,0.18);
  --text: #f0ebe0;
  --text-muted: #8a8278;
  --text-dim: #4d4840;
  --amber: #d4901a;
  --amber-light: #f0b84a;
  --green: #52a876;
  --red: #c94040;
  --orange: #c4703a;
  --nav-bg: rgba(10,9,8,0.92);
  --nav-bg-solid: rgba(10,9,8,0.98);
  --chip-bg: rgba(240,235,224,0.05);
  --accent-wash: rgba(212,144,26,0.08);
  --accent-edge: rgba(212,144,26,0.25);
  --amber-text: #d4901a;
  --ink-2: #c4bcae;
  --ink-3: #a8a094;
  --ink-5: #7a7264;
  --ink-6: #5a544a;
  --amber-rgb: 212,144,26;
  --ink-rgb: 240,235,224;
  --green-rgb: 82,168,118;
  --red-rgb: 201,64,64;
  --green-light: #7bc9a0;
  --green-soft: #5fb886;
  --green-soft-rgb: 95,184,134;
  --red-light: #e08080;
  --purple: #b28adf;
  --purple-rgb: 178,138,223;
  --orange-rgb: 196,112,58;
  --orange-light: #e09060;
  --surface-rgb: 20,18,16;
  --shadow-inset: rgba(0,0,0,0.28);
  --shadow-pop: rgba(0,0,0,0.55);
  --cta-bg: #d4901a;
}

/* Amber that is being READ rather than looked at. Scoped to light so dark keeps
   its own (already high-contrast) values untouched; the descendant selector
   also outranks the plain `a` / `code` rules the pages still declare inline,
   so it lands regardless of source order. */
html[data-theme="light"] a,
html[data-theme="light"] a:hover,
html[data-theme="light"] code,
html[data-theme="light"] .section-label,
html[data-theme="light"] .nav-links a.active,
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .mobile-menu .mm-signin { color: var(--amber-text); }

/* Nav chrome is not body copy, and the bare `html[data-theme="light"] a` above
   was catching it. That selector scores (0,1,2) — one attribute, two elements —
   which outranks `.nav-links a` at (0,1,1), so in light theme ALL SEVEN header
   links rendered amber and the `.active` page was indistinguishable from the
   six it sat beside: the current-page indicator worked in dark and silently
   did nothing in light. Same for the drawer. Two classes take it back; the
   `.active` rule above is (0,3,2) and still wins over this (0,2,2), so the
   one link that IS meant to be amber keeps it. */
html[data-theme="light"] .nav-links a,
html[data-theme="light"] .mobile-menu a { color: var(--text-muted); }

html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .mobile-menu a:hover { color: var(--text); }

/* Sign in had the same split: muted in dark, amber in light, for no reason
   other than the selector above catching it. Scoped to .nav-actions so the
   in-page "Back to home" button on /security keeps its own amber. */
html[data-theme="light"] .nav-actions .btn-ghost { color: var(--text-muted); }
html[data-theme="light"] .nav-actions .btn-ghost:hover { color: var(--text); }

/* The panel paints its two lines through .np-title / .np-desc rather than the
   anchor, so it needs its own pair. */
html[data-theme="light"] .mobile-menu a.active { color: var(--amber-text); }
html[data-theme="light"] .nav-panel .np-title { color: var(--text); }
html[data-theme="light"] .nav-panel a.active .np-title { color: var(--amber-text); }
html[data-theme="light"] .nav-group-trigger.active { color: var(--amber-text); }


/* The oversized step/topic numerals are display-sized and bold, so they clear
   the large-text bar on --amber and are deliberately left on it — dropping
   them to --amber-text would make the accent read as brown. */

/* ── Inline-SVG palette bridge ──────────────────────────────────────────────
   The inline diagrams paint with fixed hex/rgba fills, and a `fill` attribute
   can't read a CSS variable — `fill="var(--x)"` is invalid in a presentation
   attribute and renders as nothing. A CSS rule, however, outranks a
   presentation attribute, so matching on the literal value is enough to
   redirect it without touching a single attribute in the markup.

   Scoped entirely to html[data-theme="light"]: in dark there is no rule at
   all, so the original attribute paints and the diagrams are untouched. That
   is why the ramp needs no dark half — see the token block above.

   Covers the palette used by the pages converted so far. Extend it as later
   pages opt in; an unmapped literal stays its dark value and shows up as a
   too-dark mark on cream, which is visible rather than silent. */

html[data-theme="light"] [fill="#0a0908"] { fill: var(--bg); }
html[data-theme="light"] [fill="#141210"] { fill: var(--surface); }
html[data-theme="light"] [fill="#1c1915"] { fill: var(--surface2); }
html[data-theme="light"] [fill="#f0ebe0"] { fill: var(--text); }
html[data-theme="light"] [fill="#c4bcae"] { fill: var(--ink-2); }
html[data-theme="light"] [fill="#a8a094"] { fill: var(--ink-3); }
html[data-theme="light"] [fill="#8a8278"] { fill: var(--text-muted); }
html[data-theme="light"] [fill="#7a7264"] { fill: var(--ink-5); }
html[data-theme="light"] [fill="#5a544a"] { fill: var(--ink-6); }
html[data-theme="light"] [fill="#4d4840"] { fill: var(--text-dim); }
html[data-theme="light"] [fill="#d4901a"] { fill: var(--amber); }
html[data-theme="light"] [fill="#f59e0b"] { fill: var(--amber); }
html[data-theme="light"] [fill="#52a876"] { fill: var(--green); }
html[data-theme="light"] [fill="#059669"] { fill: var(--green); }

html[data-theme="light"] [stroke="#a8a094"] { stroke: var(--ink-3); }
html[data-theme="light"] [stroke="#d4901a"] { stroke: var(--amber); }
html[data-theme="light"] [stroke="#f59e0b"] { stroke: var(--amber); }
html[data-theme="light"] [stroke="#52a876"] { stroke: var(--green); }
html[data-theme="light"] [stroke="#059669"] { stroke: var(--green); }

/* Cream-at-alpha hairlines and washes. These are the ones that vanish outright
   on a cream page, so they invert to ink-at-alpha rather than merely darken. */
html[data-theme="light"] [fill="rgba(240,235,224,0.22)"] { fill: rgba(30,25,20,0.30); }
html[data-theme="light"] [fill="rgba(240,235,224,0.24)"] { fill: rgba(30,25,20,0.32); }
html[data-theme="light"] [fill="rgba(240,235,224,0.28)"] { fill: rgba(30,25,20,0.36); }
html[data-theme="light"] [fill="rgba(240,235,224,0.4)"]  { fill: rgba(30,25,20,0.48); }
html[data-theme="light"] [fill="rgba(240,235,224,0.7)"]  { fill: rgba(30,25,20,0.72); }
html[data-theme="light"] [stroke="rgba(240,235,224,0.04)"] { stroke: rgba(30,25,20,0.08); }
html[data-theme="light"] [stroke="rgba(240,235,224,0.05)"] { stroke: rgba(30,25,20,0.09); }
html[data-theme="light"] [stroke="rgba(240,235,224,0.06)"] { stroke: rgba(30,25,20,0.10); }
html[data-theme="light"] [stroke="rgba(240,235,224,0.14)"] { stroke: rgba(30,25,20,0.18); }
html[data-theme="light"] [stroke="rgba(240,235,224,0.18)"] { stroke: rgba(30,25,20,0.22); }

/* Accent tints. Amber and green both darken in light, and the very low alphas
   need a lift or they disappear into the cream. */
html[data-theme="light"] [fill="rgba(212,144,26,0.10)"] { fill: rgba(168,112,14,0.14); }
html[data-theme="light"] [fill="rgba(212,144,26,0.45)"] { fill: rgba(168,112,14,0.50); }
html[data-theme="light"] [fill="rgba(212,144,26,0.55)"] { fill: rgba(168,112,14,0.60); }
html[data-theme="light"] [fill="rgba(212,144,26,0.7)"]  { fill: rgba(168,112,14,0.75); }
html[data-theme="light"] [fill="rgba(212,144,26,0.85)"] { fill: rgba(168,112,14,0.88); }
html[data-theme="light"] [fill="rgba(82,168,118,0.08)"] { fill: rgba(45,122,82,0.12); }
html[data-theme="light"] [stroke="rgba(212,144,26,0.55)"] { stroke: rgba(168,112,14,0.60); }
html[data-theme="light"] [stroke="rgba(212,144,26,0.7)"]  { stroke: rgba(168,112,14,0.75); }
html[data-theme="light"] [stroke="rgba(82,168,118,0.45)"] { stroke: rgba(45,122,82,0.50); }

/* Gradient stops are presentation attributes too, and take the same treatment.
   Only the stops OUTSIDE the mockups are listed — the ones inside them are
   deliberately absent so the screenshots keep their dark gradients. */
html[data-theme="light"] [stop-color="#d4901a"] { stop-color: var(--amber); }
html[data-theme="light"] [stop-color="rgba(212,144,26,0.05)"] { stop-color: rgba(168,112,14,0.08); }
html[data-theme="light"] [stop-color="rgba(212,144,26,0.55)"] { stop-color: rgba(168,112,14,0.60); }