/* ══════════════════════════════════════════════════════════════
   Light theme — white, grey and gold
   ══════════════════════════════════════════════════════════════
   The site was built light-on-dark: 558 uses of rgba(255,255,255,…)
   and 87 of color:#fff across 40 files, none of them tokenised.
   Turning the background white makes every one of those invisible,
   so a light theme cannot be done by repointing --navy. It has to
   restate the rules that assume a dark background.

   This file does that, scoped to `html.theme-light`, so it can be
   switched on one page at a time and compared against the live
   design before anything is committed site-wide.

   TWO GOLDS, AND WHY
   ------------------
   The brand gold #c9a96e scores 2.24:1 on white. That is not a
   preference, it is unreadable — WCAG asks 4.5:1 for body text.
   But the same gold carries navy text at 8.10:1, so it is still
   excellent as a fill.

     --pe-accent       #c9a96e   fills, rules, buttons, borders
     --pe-accent-ink   #8a6a2c   gold TEXT on white (5.03:1)

   The brand is unchanged. It is the same gold; it simply cannot
   be used for small text on a white ground, and pretending
   otherwise would ship a site people squint at.

   EVERY VALUE HERE IS MEASURED
   ----------------------------
     text on white        #1a1d21   16.91:1
     muted on white       #5f6570    5.86:1
     faint on white       #7a808a    3.98:1  large text and UI only
     muted on surface     #5f6570    5.47:1
   ══════════════════════════════════════════════════════════════ */

html.theme-light {
  /* ── Semantic tokens. These are the names the rest of the site
     should eventually use, so a future palette is this block and
     nothing else. ─────────────────────────────────────────────── */
  --pe-bg:          #ffffff;
  --pe-surface:     #f7f7f5;   /* alternating bands, cards on white */
  --pe-surface-2:   #efefec;   /* pressed / nested */
  --pe-text:        #1a1d21;
  --pe-text-muted:  #5f6570;
  --pe-text-faint:  #7a808a;   /* large text and UI furniture only */
  --pe-hairline:    rgba(26,29,33,0.10);
  --pe-hairline-2:  rgba(26,29,33,0.06);
  --pe-accent:      #c9a96e;   /* the brand gold — fills and rules */
  --pe-accent-ink:  #8a6a2c;   /* the brand gold, legible as text */
  --pe-on-accent:   #1a1d21;
  --pe-shadow:      0 1px 3px rgba(26,29,33,0.06), 0 8px 24px rgba(26,29,33,0.05);

  /* Repoint the existing variables so the 886 uses of var(--navy)
     and var(--gold) land somewhere sensible.

     --navy must become a BACKGROUND, not a text colour. It is used
     both ways, but `section { background: var(--navy) }` and
     `.feature-dark` are the load-bearing uses: point it at the text
     colour and those bands stay dark while their text turns dark
     too, which is a contrast ratio of 1.0 — invisible. Every place
     --navy meant "dark text on a light card" is restated below.

     --white is the mirror of that: "white text" now means "body
     text", so it becomes near-black. */
  --navy:        var(--pe-bg);
  --navy-light:  var(--pe-surface);
  --navy-mid:    var(--pe-surface-2);
  --gold:        var(--pe-accent-ink);
  --gold-light:  var(--pe-accent);
  --sand:        var(--pe-surface);
  --sand-dark:   var(--pe-surface-2);
  --white:       var(--pe-text);
  --text-body:   var(--pe-text);
  --text-muted:  var(--pe-text-muted);
}

/* ── Page ────────────────────────────────────────────────────── */
html.theme-light body {
  background: var(--pe-bg);
  color: var(--pe-text);
}

/* ── Nav ─────────────────────────────────────────────────────── */
html.theme-light nav:not(.pe-tabbar):not(.pe-adm-nav) {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--pe-hairline-2);
}
html.theme-light nav.scrolled { background: rgba(255,255,255,0.96); }
html.theme-light nav .nav-links a { color: var(--pe-text); }
html.theme-light nav .nav-links a:hover,
html.theme-light nav .nav-links a.active { color: var(--pe-accent-ink); }
html.theme-light nav .account-trigger {
  color: var(--pe-accent-ink); border: 1px solid rgba(138,106,44,0.35);
}
html.theme-light nav .account-trigger:hover { border-color: var(--pe-accent-ink); color: var(--pe-text); }
html.theme-light .dropdown-menu {
  background: #fff; border: 1px solid var(--pe-hairline); box-shadow: var(--pe-shadow);
}
html.theme-light .dropdown-menu a { color: var(--pe-text); }
html.theme-light .dropdown-menu a:hover { background: var(--pe-surface); }
/* Every lockup on a themed page now loads logo-dark.png (#1d1d1b,
   recoloured from the brand black lockup), including hub.html's hero —
   .home-hero-intro is a white band, not a photograph behind a scrim.
   index.html's hero bird is the one that stays white, and it carries
   its own inline filter over a real image. Nothing here needs one. */
html.theme-light .menu-toggle span { background: var(--pe-text); }

/* ── Hero: still an image, so its text stays white ───────────── */
html.theme-light .hero-overlay {
  background: linear-gradient(180deg, rgba(20,22,26,0.30) 0%,
                                       rgba(20,22,26,0.18) 40%,
                                       rgba(20,22,26,0.72) 100%);
}
html.theme-light .hero h1,
html.theme-light .hero-content h1 { color: #fff; }
html.theme-light .hero p { color: rgba(255,255,255,0.82); }
html.theme-light .hero-label { color: var(--pe-accent); }

/* ── Type ────────────────────────────────────────────────────── */
html.theme-light h1, html.theme-light h2, html.theme-light h3,
html.theme-light h4, html.theme-light .section-heading { color: var(--pe-text); }
html.theme-light .section-label { color: var(--pe-accent-ink); }
html.theme-light .section-subheading { color: var(--pe-text); }
/* Body copy is black. Grey is reserved for hints — labels, captions,
   counts, footnotes — and gold for accents. Long-form reading is
   what this whole change is for, so the prose gets full contrast. */
html.theme-light .body-text,
html.theme-light .body-text-dark,
html.theme-light p, html.theme-light li, html.theme-light td { color: var(--pe-text); }
html.theme-light .text-muted { color: var(--pe-text-muted); }
html.theme-light .text-gold { color: var(--pe-accent-ink); }
html.theme-light .divider { background: var(--pe-accent); }
html.theme-light .hero-sub, html.theme-light .vision-lead { color: var(--pe-text); }
html.theme-light .vision-gold { color: var(--pe-accent-ink); }

/* ── Bands ───────────────────────────────────────────────────── */
html.theme-light section { background: transparent; }
html.theme-light .feature-dark { background: var(--pe-surface); }
html.theme-light .feature-dark .body-text { color: var(--pe-text); }
html.theme-light .feature-light { background: var(--pe-bg); }
html.theme-light .feature-light .section-heading { color: var(--pe-text); }
html.theme-light .feature-light .body-text { color: var(--pe-text); }

/* ── Stats ───────────────────────────────────────────────────── */
html.theme-light .stats-banner {
  background: var(--pe-surface);
  border-top: 1px solid var(--pe-hairline-2);
  border-bottom: 1px solid var(--pe-hairline-2);
}
html.theme-light .stat-number { color: var(--pe-text); }
html.theme-light .stat-label { color: var(--pe-text-muted); }
html.theme-light .dev-overview { background: var(--pe-surface); }
html.theme-light .dev-card .dev-number { color: var(--pe-text); }
html.theme-light .dev-card .dev-label { color: var(--pe-text-muted); }

/* ── Cards ───────────────────────────────────────────────────── */
html.theme-light .img-card,
html.theme-light .info-card,
html.theme-light .metric-card {
  background: var(--pe-bg);
  border: 1px solid var(--pe-hairline);
  box-shadow: var(--pe-shadow);
}
html.theme-light .img-card:hover { border-color: rgba(201,169,110,0.55); }
html.theme-light .img-card p,
html.theme-light .info-card p,
html.theme-light .metric-card p { color: var(--pe-text); }
html.theme-light .img-card h3,
html.theme-light .info-card h4 { color: var(--pe-text); }
html.theme-light .img-card .card-stat { color: var(--pe-accent-ink); }
html.theme-light .img-card-light,
html.theme-light .info-card-light { background: var(--pe-surface); border: 1px solid var(--pe-hairline); }
html.theme-light .img-card-light h3,
html.theme-light .info-card-light h4 { color: var(--pe-text); }
html.theme-light .img-card-light p,
html.theme-light .info-card-light p { color: var(--pe-text); }

/* ── Buttons: gold is a fill here, which it is good at ───────── */
html.theme-light .btn-login,
html.theme-light .btn-primary, html.theme-light .cta-button {
  background: var(--pe-accent); color: var(--pe-on-accent);
  border: 1px solid var(--pe-accent);
}
html.theme-light .btn-login:hover,
html.theme-light .btn-primary:hover, html.theme-light .cta-button:hover {
  background: #b8934a; border-color: #b8934a; color: var(--pe-on-accent);
}

/* ── Footer ──────────────────────────────────────────────────── */
html.theme-light footer, html.theme-light .site-footer {
  background: var(--pe-surface);
  border-top: 1px solid var(--pe-hairline-2);
}
html.theme-light footer p, html.theme-light .site-footer p { color: var(--pe-text-faint); }
html.theme-light footer img, html.theme-light .site-footer img {
  opacity: 0.55;   /* logo-dark.png is already the right colour */
}

/* ── App shell: the bar is furniture, so it keeps its weight ─── */
html.theme-light .pe-tabbar {
  background: rgba(255,255,255,0.94);
  border-top: 1px solid var(--pe-hairline);
}
html.theme-light .pe-tab { color: var(--pe-text-faint); }
html.theme-light .pe-tab.is-active { color: var(--pe-accent-ink); }
html.theme-light .pe-tab.is-active::before { background: var(--pe-accent); }
html.theme-light .pe-sheet, html.theme-light .pe-explore {
  background: #fff; border-top: 1px solid var(--pe-hairline);
}
html.theme-light .pe-sheet-title, html.theme-light .pe-explore-section { color: var(--pe-accent-ink); }
html.theme-light .pe-appicon { color: var(--pe-text); }
html.theme-light .pe-appicon-tile {
  background: var(--pe-surface); border: 1px solid var(--pe-hairline); color: var(--pe-accent-ink);
}
html.theme-light .pe-overlay { background: rgba(26,29,33,0.35); }

/* ── app-shell.css is written light-on-dark, and theme-light only
   caught the pieces I had looked at. These are the rest: every
   `color:` in app-shell.css that lands on a surface this file has
   turned white. Found by rendering at 390px with the sheets open and
   measuring contrast, not by reading the stylesheet. ───────────── */

/* The Explore launcher. The tile labels were rgba(255,255,255,0.8)
   on white — 1.00:1, which is why the icon grid had no names. */
html.theme-light .pe-appicon span { color: var(--pe-text); }
html.theme-light .pe-explore-head h2 { color: var(--pe-text); }
html.theme-light .pe-explore-close { color: var(--pe-text-muted); }

/* The account sheet: rows, dividers, press state and grab handle. */
html.theme-light .pe-sheet::before { background: rgba(26,29,33,0.18); }
html.theme-light .pe-sheet a:not(.pe-appicon),
html.theme-light .pe-sheet button.pe-sheet-item {
  color: var(--pe-text);
  border-top: 1px solid var(--pe-hairline-2);
}
html.theme-light .pe-sheet a:not(.pe-appicon):active,
html.theme-light .pe-sheet button.pe-sheet-item:active { background: var(--pe-surface); }

/* "Add to Home Screen" walkthrough, which lives inside that sheet. */
html.theme-light .pe-howto-step { border-top: 1px solid var(--pe-hairline-2); }
html.theme-light .pe-howto-txt { color: var(--pe-text-muted); }
html.theme-light .pe-howto-txt strong { color: var(--pe-text); }

/* The install prompt stays a dark toast — a light one would compete
   with the page. So its white copy is correct and only the ground and
   the button need restating: var(--gold) resolves to the dark ink
   gold here, which on var(--navy) text would be dark on dark. */
html.theme-light .pe-install { background: var(--pe-text); border-color: rgba(201,169,110,0.35); }
/* .pe-install-x is also a button inside .pe-install, so it has to be
   excluded or it inherits the gold fill and the dismiss cross lands at
   1.53:1 on gold. */
html.theme-light .pe-install button:not(.pe-install-x) {
  background: var(--pe-accent); color: var(--pe-on-accent);
}
html.theme-light .pe-install .pe-install-x {
  background: none; color: rgba(255,255,255,0.62);
}

/* Data-room close control and the open-folder row, both on white. */
html.theme-light .pe-dr-close {
  background: var(--pe-surface);
  border: 1px solid var(--pe-hairline);
  color: var(--pe-text);
}
html.theme-light #fdr-tree .fdr-folder.open .fdr-folder-head { background: var(--pe-surface); }

/* Hairlines drawn for a navy bar. */
html.theme-light.pe-app nav:not(.pe-tabbar):not(.pe-adm-nav) { border-bottom-color: var(--pe-hairline-2); }

/* ── Login gate ──────────────────────────────────────────────── */
html.theme-light #login-gate { background: var(--pe-bg); }
/* styles.css:22 whitens the gate lockup for a navy page:
     #login-gate img { filter: brightness(0) invert(1); opacity: 0.8 }
   On a white gate that is a white bird on a white background — invisible.
   bird.png is already the brand teal (#0aa3bb measured) and the two admin
   gates now load logo-dark.png, so neither wants a filter. */
html.theme-light #login-gate img { filter: none; opacity: 0.9; }
html.theme-light #login-gate .login-form input {
  background: #fff; border: 1px solid var(--pe-hairline); color: var(--pe-text);
}
html.theme-light #login-gate .login-form input::placeholder { color: var(--pe-text-faint); }
html.theme-light #login-gate .login-sub,
html.theme-light #login-gate .back-link { color: var(--pe-text-muted); }

/* ── Consent banner ──────────────────────────────────────────── */
html.theme-light .pe-consent { background: var(--pe-text); border-top: none; }
html.theme-light .pe-consent p { color: rgba(255,255,255,0.78); }

/* ── The sweep-up rule ───────────────────────────────────────────
   Inline styles on individual pages still carry raw white values
   this file cannot reach. Anything that ends up white-on-white is
   a bug to fix at source, not to paper over — so no catch-all
   here on purpose. The renders are how we find them. */


/* ── Bands that were dark ────────────────────────────────────────
   Pages set `background: var(--navy)` inline on their sections.
   That now resolves to white, so alternate bands need a surface of
   their own to keep the page from becoming one flat sheet. */
html.theme-light section:nth-of-type(even) { background: var(--pe-surface); }
html.theme-light .stats-banner,
html.theme-light .dev-overview { background: var(--pe-surface); }

/* Grey is a hint, not a paragraph. These are the only things that
   should be quieter than the prose. */
html.theme-light .stat-label,
html.theme-light .dev-label,
html.theme-light .card-label,
html.theme-light .fdr-file-size,
html.theme-light figcaption,
html.theme-light small { color: var(--pe-text-muted); }


/* ── Fixes found by rendering all 28 pages ───────────────────────
   Each of these was measured, not guessed. */

/* A faint gold wash, for panels that were rgba(201,169,110,0.08) on
   navy. Solid gold there would be a billboard. */
html.theme-light { --pe-accent-soft: rgba(201,169,110,0.14); }

/* Anything sitting ON the gold fill takes dark text. Gold ink on gold
   measured 2.25:1; near-black on gold is 7.56:1. */
/* !important is deliberate and narrow. The text inside these panels
   carries its own inline colour, which outranks any stylesheet rule,
   and gold ink on a gold ground measured 2.25:1 — unreadable. There is
   no case where text on the gold fill should be anything but dark. */
html.theme-light [style*="background: var(--pe-accent)"],
html.theme-light [style*="background:var(--pe-accent)"],
html.theme-light [style*="background: var(--pe-accent)"] *,
html.theme-light [style*="background:var(--pe-accent)"] * { color: var(--pe-text) !important; }
html.theme-light [style*="background: var(--pe-accent)"] a,
html.theme-light [style*="background:var(--pe-accent)"] a { text-decoration: underline; }

/* The hero label is bright gold BECAUSE it sits on a photograph. The
   same class on a white section is 2.24:1, so only the hero keeps it. */
html.theme-light .hero-label { color: var(--pe-accent-ink); }
html.theme-light .hero .hero-label,
html.theme-light .hero-content .hero-label { color: var(--pe-accent); }


/* ── Heroes sit over photographs ─────────────────────────────────
   The scrim is dark so the image reads; the text on it stays white.
   index.html carries its own hero rules inline, so they are named
   here as well as the shared .hero. */
html.theme-light .hero-overlay { z-index: 1; }
html.theme-light .hero-content,
html.theme-light .hero-content h1,
html.theme-light .hero-content h2,
html.theme-light .hero-content p,
html.theme-light .hero-content .hero-sub { color: #fff; }
html.theme-light .hero-content .hero-label { color: var(--pe-accent); }
/* .hero-logo needs no filter: hub.html's lockup is already white, and
   index.html's bird carries its own inline filter. */