/* ════════════════════════════════════════════════════════════════════
   EvidenceSeek — ABOUT PAGE, LIGHT MODE
   Loaded AFTER about.html's embedded <style> to override its dark
   "deep ink" theme. Applied when es_theme=light (the client toggle
   enables/disables this always-present <link> live), tagging the document
   <html data-theme="light"> and swapping the backdrop to the lighter
   book-animation-end-3 image. Internal links stay canonical — the cookie
   carries the theme, so there's no link rewriting.

   Strategy mirrors index-light.css: about.html drives most color through
   the same :root token roles the app uses (--ink* for fills, --parchment*
   for text, --copper accent), so we invert those token VALUES and the
   variable-driven rules flip for free. The blocks below then patch the
   handful of surfaces that hard-code rgba() (the content band, glass
   cards, hairlines, dark fills).

   NOTE: the :root values below are kept identical to index-light.css's
   core palette on purpose — if the design tokens are ever factored into a
   single shared stylesheet, this block lifts straight out with no
   reconciliation. Two additions: the --success pair (the diagram bars use
   --success where the app uses --positive), and --rgb-paper, the backdrop
   grey index-light.css currently inlines as the rgb(237,237,237) literal.
   ════════════════════════════════════════════════════════════════════ */

:root {
    /* Core palette — inverted vs the dark theme.
       "ink" spectrum is now light paper; "parchment" spectrum is now dark ink. */

    /* "ink" → light paper surfaces / fills. */
    --ink: #fcfbf7;
    --ink-card: #ffffff;

    /* "parchment" → dark ink text */
    --parchment: #1c1b18;        /* primary text */
    --parchment-dim: #4a4742;    /* secondary text, labels */
    --parchment-muted: #6f6b62;  /* tertiary text, placeholders */

    /* Accent — slate blue, darkened a notch to hold AA contrast on light. */
    --copper: #3a55ab;
    --copper-glow: rgba(58, 85, 171, 0.3);   /* light focus ring (shared FAQ etc.) */
    --gold: #5b6fa8;                          /* light .faq-tbd marker (parity) */

    /* ── Fixed RGB triplets for the light overlay (periwinkle / ink family) ── */
    --rgb-ink-dark:    28, 27, 24;    /* dark ink text/scrim */
    --rgb-white:      255, 255, 255;
    --rgb-paper:      237, 237, 237;  /* backdrop grey — matches the bg image */
    --rgb-peri:       118, 148, 225;  /* periwinkle, active fills */
    --rgb-peri-light: 140, 170, 234;  /* glass borders */
    --rgb-shadow:      45, 65, 130;   /* shadow-blue */

    /* About-specific: the diagram's "filled" bars and high-column header use
       --success (the app's stylesheet uses --positive instead). Kept the same
       bright green as dark mode on purpose — the darker, AA-contrast green read
       as muddy/washed-out against the grey diagram panel, so we favor the more
       saturated green for legibility here even though its luminance contrast is
       lower. */
    --success: #4a9c6d;
    --success-dim: rgba(74, 156, 109, 0.15);
}

/* ── Page base ────────────────────────────────────────────────────────
   No backdrop image (removed from about.html); the page is a flat grey fill
   matching index-light.css's body base. The dark page falls back to its own
   --ink fill; here we override that paper-white token value to the grey. */
body {
    background: rgb(var(--rgb-paper));
}

/* ── Full-width content band ──────────────────────────────────────────
   Dark scrim → pale frosted panel over the lighter backdrop. */
.content-band {
    background: linear-gradient(
        to bottom,
        rgba(var(--rgb-paper), 0.82) 0%,
        rgba(var(--rgb-paper), 0.92) 50%,
        rgba(var(--rgb-paper), 0.82) 100%
    );
}

/* ── Scroll indicators ────────────────────────────────────────────────
   Parchment fill → dark ink at the same alpha (active/hover ride tokens). */
.scroll-dot {
    background: rgba(var(--rgb-ink-dark), 0.2);
}

/* ── Example diagram card ─────────────────────────────────────────────
   Dark glass → light glass with a periwinkle edge, matching the home cards. */
.diagram {
    background: rgba(var(--rgb-paper), 0.85);
    border: 1px solid rgba(var(--rgb-peri-light), 0.6);
}

/* Hairline rules inside the diagram: parchment hairlines → dark ink. */
.hypothesis,
.diagram-header {
    border-bottom: 1px solid rgba(var(--rgb-ink-dark), 0.12);
}

.diagram-row.overall {
    border-top: 1px solid rgba(var(--rgb-ink-dark), 0.15);
}

/* Empty bar segments: faint parchment → faint dark ink. */
.bar .empty {
    color: rgba(var(--rgb-ink-dark), 0.15);
}

/* ── Report-page mock (panel 2) ───────────────────────────────────────
   Dark fill → translucent white; its solid/dashed sub-borders ride the
   --parchment-muted token, which already flips. */
.report-page {
    background: rgba(var(--rgb-paper), 0.55);
}

.summary-section {
    border-bottom: 1px solid rgba(var(--rgb-ink-dark), 0.15);
}

/* ── Navigation pill ──────────────────────────────────────────────────
   Dark glass → light glass with a periwinkle edge; hover wash flips to dark
   ink. Link colors ride --parchment* / --copper and flip for free. */
.nav-pill {
    background: rgba(var(--rgb-white), 0.55);
    border: 1px solid rgba(var(--rgb-peri-light), 0.6);
}

.nav-pill a:hover {
    background: rgba(var(--rgb-ink-dark), 0.06);
}

/* ── GitHub button ────────────────────────────────────────────────────
   Parchment border/hover → dark ink (its text rides --parchment). */
.github-button {
    border: 1px solid rgba(var(--rgb-ink-dark), 0.2);
}

.github-button:hover {
    background: rgba(var(--rgb-ink-dark), 0.06);
}
