/*
 * offkit design tokens + components (REDESIGN_README.md). Loaded site-wide
 * since 261003.r2 (extended the toggle to every page, not just '/');
 * 261003.r3 re-themed the accent color in light mode; 261003.r4 made the
 * logo mark's gradient follow it; 261003.r5 extended the accent re-theme
 * to dark mode too, so indigo no longer appears anywhere except as the
 * undefined-variable fallback baked into the logo SVG (see below).
 *
 * Two layers:
 *  1. `.rd-*` classes (homepage, header, footer) — the real, bespoke
 *     redesign, using these tokens directly.
 *  2. The "site-wide theme overrides" section at the bottom — a deliberately
 *     lighter-weight compatibility layer for the 29 tool pages, blog, games
 *     and about/privacy/terms, which still use their original hardcoded
 *     dark Tailwind classes (bg-gray-900, text-white, etc.) rather than the
 *     new tokens. Those classes are remapped in place when
 *     [data-theme="light"] is active, so every page repaints correctly
 *     without any changes to their markup/logic — at the cost of still
 *     having today's layout/spacing rather than the fully redesigned shape
 *     Section 8 describes for a later pass. See that section's own comment
 *     for exactly what is and isn't covered.
 */

:root, [data-theme="light"] {
  --surface-100: #f7f6f2;  --surface-200: #ffffff;
  --border: #dcd9cf;       --border-strong: #76837c;
  --ink: #14211c;          --ink-muted: #4a5851;
  --brand: #0f6b4f;        --on-brand: #ffffff;
  /* Darker steps of --brand, for hover/active states on the site-wide
     accent-color override below (261003.r3) — kept light-only since dark
     mode never uses them (it keeps the original indigo, unchanged). */
  --brand-hover: #0b5540;  --brand-active: #083d2e;
  --accent: #f2b134;       --on-accent: #1f1606;
  --focus: #1d4ed8;
  --cat-pdf-bg: #fde8df;   --cat-pdf-fg: #8f2f0c;
  --cat-image-bg: #dff1f5; --cat-image-fg: #0b5566;
  --cat-dev-bg: #e3e9fb;   --cat-dev-fg: #27409a;
  --cat-make-bg: #fbf0cf;  --cat-make-fg: #6b4a00;
  --cat-text-bg: #e2f2e8;  --cat-text-fg: #145a38;
  --shadow-card: 0 1px 2px rgba(20,33,28,.08), 0 4px 12px rgba(20,33,28,.06);
  --shadow-lift: 0 2px 4px rgba(20,33,28,.10), 0 10px 24px rgba(20,33,28,.10);
}
[data-theme="dark"] {
  --surface-100: #111827;  --surface-200: #1b2536;
  --border: #2b3648;       --border-strong: #64748b;
  --ink: #f1f5f9;          --ink-muted: #a9b6c8;
  --brand: #34d399;        --on-brand: #052e1f;
  /* Darker steps for solid fills (261003.r5 — tool-page accent in dark
     mode): --brand itself (#34d399, Tailwind emerald-400) is bright and
     reads great as TEXT on a dark surface, but is too light for a button
     fill with white text on top (fails 4.5:1). These are emerald-700/
     800/900, which do. */
  --brand-fill: #047857;   --brand-fill-hover: #065f46; --brand-fill-active: #064e3b;
  --brand-light: #6ee7b7;  --brand-lighter: #a7f3d0;    --brand-lightest: #d1fae5;
  --accent: #fbbf24;       --on-accent: #1f1606;
  --focus: #fbbf24;
  --cat-pdf-bg: #3a2219;   --cat-pdf-fg: #fdba9b;
  --cat-image-bg: #12303a; --cat-image-fg: #8fd8e8;
  --cat-dev-bg: #1f2a4d;   --cat-dev-fg: #b2c2fb;
  --cat-make-bg: #3a2e10;  --cat-make-fg: #fcd57a;
  --cat-text-bg: #173a29;  --cat-text-fg: #9fe3bd;
  --shadow-card: 0 1px 2px rgba(0,0,0,.4);
  --shadow-lift: 0 4px 16px rgba(0,0,0,.5);
}

.rd-root {
  background: var(--surface-100);
  color: var(--ink);
  font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.rd-root a { color: inherit; }

.rd-root *:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---- Layout ---- */
.rd-section { padding: 48px 16px; }
.rd-col { max-width: 1040px; margin: 0 auto; }
@media (min-width: 640px) { .rd-section { padding: 48px 24px; } }

/* ---- Header (homepage only) ---- */
.rd-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface-200) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.rd-nav-link {
  color: var(--ink-muted);
  font-weight: 500;
  transition: color .2s;
  min-height: 44px; display: inline-flex; align-items: center;
}
.rd-nav-link:hover { color: var(--ink); }
.rd-nav-link--active { color: var(--brand); }
.rd-dropdown {
  background: var(--surface-200);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lift);
}
.rd-dropdown a { color: var(--ink-muted); }
.rd-dropdown a:hover { background: var(--surface-100); color: var(--ink); }
.rd-dropdown-label { color: var(--ink-muted); opacity: .75; }

.rd-toggle {
  width: 44px; height: 44px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-100); border: 1px solid var(--border); color: var(--ink);
}
.rd-toggle:hover { border-color: var(--border-strong); }

/* ---- Hero ---- */
.rd-hero { text-align: center; padding: 140px 16px 48px; }
.rd-hero h1 {
  font-size: 32px; line-height: 38px; font-weight: 700; margin-bottom: 16px; color: var(--ink);
}
@media (min-width: 640px) { .rd-hero h1 { font-size: 48px; line-height: 52px; } }
.rd-hero p { font-size: 17px; color: var(--ink-muted); max-width: 640px; margin: 0 auto 32px; }

.rd-search {
  display: flex; gap: 8px; max-width: 640px; margin: 0 auto 24px;
  background: var(--surface-200); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 6px 6px 20px;
  box-shadow: var(--shadow-card);
}
.rd-search input {
  flex: 1; border: 0; background: transparent; color: var(--ink);
  font-size: 16px; min-height: 44px;
}
.rd-search input::placeholder { color: var(--ink-muted); }
/* The input's own square outline would be clipped by the pill's border-radius,
   so it's suppressed here — but :focus-within puts an equivalent 3px ring
   around the whole pill instead. Never outline:none without a replacement. */
.rd-search input:focus { outline: none; }
.rd-search:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.rd-search button {
  background: var(--brand); color: var(--on-brand); border: 0;
  border-radius: 999px; padding: 0 24px; font-weight: 600; min-height: 44px; cursor: pointer;
}

.rd-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 8px; }
.rd-chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface-200);
  color: var(--ink-muted); font-size: 14px; font-weight: 500; text-decoration: none;
  transition: border-color .2s, color .2s;
}
.rd-chip:hover { border-color: var(--border-strong); color: var(--ink); }
.rd-chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

/* ---- Category tiles ---- */
/* Single column below 480px — at 320px, 2 columns left too little room inside
   a 24px-padded tile for the tagline text next to a 48px icon. */
.rd-tiles { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 480px) { .rd-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .rd-tiles { grid-template-columns: repeat(5, 1fr); } }
.rd-tile {
  display: block; padding: 24px; border-radius: 12px;
  background: var(--surface-200); border: 1px solid var(--border);
  box-shadow: var(--shadow-card); text-decoration: none; color: inherit;
  transition: box-shadow .2s, border-color .2s;
}
.rd-tile:hover { box-shadow: var(--shadow-lift); border-color: var(--border-strong); }
.rd-tile-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
  background: var(--cat-bg, var(--cat-dev-bg)); color: var(--cat-fg, var(--cat-dev-fg));
}
.rd-tile h3 { font-size: 17px; font-weight: 600; margin-bottom: 4px; color: var(--ink); }
.rd-tile p { font-size: 14px; color: var(--ink-muted); }

/* ---- Tools grid ---- */
.rd-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .rd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rd-grid { grid-template-columns: repeat(3, 1fr); } }
.rd-card {
  display: flex; flex-direction: column; padding: 24px; border-radius: 12px;
  background: var(--surface-200); border: 1px solid var(--border);
  box-shadow: var(--shadow-card); text-decoration: none; color: inherit;
  transition: box-shadow .2s, border-color .2s;
}
.rd-card:hover { box-shadow: var(--shadow-lift); border-color: var(--border-strong); }
.rd-card-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
  background: var(--cat-bg, var(--cat-dev-bg)); color: var(--cat-fg, var(--cat-dev-fg));
}
.rd-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 4px; color: var(--ink); }
.rd-card p { font-size: 14px; line-height: 20px; color: var(--ink-muted); flex: 1; margin-bottom: 12px; }
.rd-tag {
  display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: var(--brand); border: 1px solid var(--border); border-radius: 6px;
  padding: 2px 8px; align-self: flex-start;
}

/* ---- Trust bar ---- */
.rd-trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; text-align: center; }
@media (min-width: 768px) { .rd-trust { grid-template-columns: repeat(4, 1fr); } }
.rd-trust-item {
  padding: 20px; border-radius: 20px; background: var(--surface-200);
  border: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--ink);
}

/* ---- Footer (homepage only) ---- */
.rd-footer { background: var(--surface-200); border-top: 1px solid var(--border); }
.rd-footer h3 { color: var(--ink); font-weight: 600; }
.rd-footer p, .rd-footer a { color: var(--ink-muted); }
.rd-footer a:hover { color: var(--brand); }
.rd-footer input {
  background: var(--surface-100); border: 1px solid var(--border); color: var(--ink);
  min-height: 44px;
}
.rd-footer button {
  background: var(--brand); color: var(--on-brand); min-height: 44px; font-weight: 600;
}

/* ---- Misc homepage sections (privacy / newsletter / games) ---- */
.rd-panel {
  background: var(--surface-200); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-card); padding: 24px;
}
.rd-h2 { font-size: 22px; line-height: 28px; font-weight: 600; color: var(--ink); }
.rd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 24px; border-radius: 999px; font-weight: 600;
  background: var(--brand); color: var(--on-brand); text-decoration: none; border: 0; cursor: pointer;
}
.rd-btn--outline {
  background: transparent; color: var(--ink); border: 1px solid var(--border);
}

@media (prefers-reduced-motion: reduce) {
  .rd-root * { transition: none !important; animation: none !important; }
}

/* =========================================================================
 * Site-wide theme overrides for pages NOT yet redesigned (tool pages, blog,
 * games, about/privacy/terms). Every selector below targets an EXACT
 * existing Tailwind utility class, scoped under [data-theme="light"], with
 * higher specificity than Tailwind's own single-class rule — so these just
 * win, no !important needed, and dark mode needs zero extra CSS here since
 * it's already what those classes render today.
 *
 * Covered: the structural grays (backgrounds/text/borders/placeholders/
 * divide) and text-white, which together account for the vast majority of
 * color usage across these pages.
 *
 * Accent color (261003.r3, extended to dark mode in r5): the site's indigo
 * accent (buttons, the big icon badge on every tool page, active tab/toggle
 * states, focus rings, badges) is replaced with a green keyed off the
 * homepage's --brand token, in BOTH themes now — it was a second,
 * inconsistent brand color next to the homepage's green, in light mode AND
 * dark. The light-mode block below darkens shades for contrast on a light
 * surface; the separate dark-mode block further down lightens them instead,
 * since that's the direction the original indigo scale itself used for
 * emphasis on a dark surface. The logo MARK's gradient is set via
 * --logo-grad-1/2, defined in both theme blocks (see the mark's own
 * component for how its fallback-to-indigo works when neither is set).
 *
 * Deliberately NOT covered (accepted trade-offs, not oversights):
 *  - Translucent/opacity-modified gray classes (bg-gray-900/40, etc.) —
 *    low visual impact at low opacity, and bounding the scope here keeps
 *    this layer reviewable. A few isolated spots (e.g. a modal backdrop, a
 *    frosted-glass panel) may look slightly muddier in light mode until
 *    Section 8's real per-page redesign.
 *  - Tailwind's `prose-a:` typography-plugin variants (2 occurrences in
 *    rendered Markdown/blog content).
 *  - Anything set via inline JS (canvas fillStyle, syntax-highlighter
 *    themes, etc.) rather than a Tailwind class — the shim only repaints
 *    classes present in the HTML, so a tool that paints its own colors in
 *    JS won't react to the toggle. Not audited per-tool; flagged as a known
 *    gap rather than silently assumed away.
 *  - bg-white (no opacity) is intentionally left alone: the QR code
 *    generator's preview card needs a literal white background to stay
 *    scannable regardless of theme.
 * ========================================================================= */

[data-theme="light"] .bg-gray-900 { background-color: var(--surface-100); }
[data-theme="light"] .bg-gray-800 { background-color: var(--surface-200); }
[data-theme="light"] .bg-gray-700 { background-color: var(--surface-200); }
[data-theme="light"] .hover\:bg-gray-600:hover { background-color: var(--border); }
[data-theme="light"] .hover\:bg-gray-700:hover { background-color: var(--border); }
[data-theme="light"] .hover\:bg-gray-800:hover { background-color: var(--surface-100); }
[data-theme="light"] .from-gray-700 { --tw-gradient-from: var(--surface-200); }
[data-theme="light"] .to-gray-800 { --tw-gradient-to: var(--surface-100); }
[data-theme="light"] .disabled\:from-gray-700:disabled { --tw-gradient-from: var(--surface-200); }
[data-theme="light"] .disabled\:to-gray-600:disabled { --tw-gradient-to: var(--surface-100); }

[data-theme="light"] .text-white { color: var(--ink); }
[data-theme="light"] .hover\:text-white:hover { color: var(--ink); }
[data-theme="light"] .group:hover .group-hover\:text-white { color: var(--ink); }
[data-theme="light"] .text-gray-200 { color: var(--ink); }
[data-theme="light"] .hover\:text-gray-200:hover { color: var(--ink); }
[data-theme="light"] .text-gray-300 { color: var(--ink-muted); }
[data-theme="light"] .hover\:text-gray-300:hover { color: var(--ink); }
[data-theme="light"] .text-gray-400 { color: var(--ink-muted); }
[data-theme="light"] .text-gray-500 { color: var(--ink-muted); }
[data-theme="light"] .text-gray-600 { color: var(--ink-muted); }
[data-theme="light"] .placeholder-gray-500::placeholder { color: var(--ink-muted); }
[data-theme="light"] .placeholder-gray-600::placeholder { color: var(--ink-muted); }

[data-theme="light"] .border-gray-600 { border-color: var(--border-strong); }
[data-theme="light"] .hover\:border-gray-600:hover { border-color: var(--border-strong); }
[data-theme="light"] .hover\:border-gray-500:hover { border-color: var(--border-strong); }
[data-theme="light"] .border-gray-700 { border-color: var(--border); }
[data-theme="light"] .border-gray-800 { border-color: var(--border); }
[data-theme="light"] .border-gray-500\/50 { border-color: var(--border-strong); }
[data-theme="light"] .divide-gray-700 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); }

/* Logo mark gradient (261003.r4) — intentionally scoped to
   [data-theme="light"] ALONE, not :root, so it stays genuinely undefined
   (falling back to the original indigo hardcoded in the SVG) until the
   light theme is explicitly active, matching every other page's
   "no attribute = original dark/indigo appearance" default. */
[data-theme="light"] { --logo-grad-1: #14b878; --logo-grad-2: #0f6b4f; }

/* Accent → green brand (261003.r3). Text shades: progressively darker
   steps of --brand for legibility, same principle as the gray text
   overrides above. */
[data-theme="light"] .text-accent-400 { color: var(--brand); }
[data-theme="light"] .text-accent-300 { color: var(--brand-hover); }
[data-theme="light"] .text-accent-200 { color: var(--brand-active); }
[data-theme="light"] .hover\:text-accent-400:hover { color: var(--brand-hover); }
[data-theme="light"] .hover\:text-accent-300:hover { color: var(--brand-active); }
[data-theme="light"] .hover\:text-accent-200:hover { color: var(--brand-active); }
[data-theme="light"] .group:hover .group-hover\:text-accent-400 { color: var(--brand-hover); }
[data-theme="light"] .group:hover .group-hover\:text-accent-300 { color: var(--brand-active); }

/* Buttons / solid fills */
[data-theme="light"] .bg-accent-400,
[data-theme="light"] .bg-accent-500,
[data-theme="light"] .bg-accent-600 { background-color: var(--brand); color: var(--on-brand); }
[data-theme="light"] .bg-accent-700 { background-color: var(--brand-hover); color: var(--on-brand); }
[data-theme="light"] .hover\:bg-accent-600:hover,
[data-theme="light"] .hover\:bg-accent-700:hover { background-color: var(--brand-hover); }
[data-theme="light"] .active\:bg-accent-800:active { background-color: var(--brand-active); }
[data-theme="light"] .bg-accent-600\/80 { background-color: var(--brand); opacity: .8; }

/* Borders / focus / rings */
[data-theme="light"] .border-accent-500,
[data-theme="light"] .border-accent-600 { border-color: var(--brand); }
[data-theme="light"] .border-accent-700 { border-color: var(--brand-hover); }
[data-theme="light"] .border-accent-500\/30 { border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
[data-theme="light"] .hover\:border-accent-500:hover,
[data-theme="light"] .hover\:border-accent-600:hover { border-color: var(--brand); }
[data-theme="light"] .focus\:border-accent-500:focus,
[data-theme="light"] .focus-within\:border-accent-500:focus-within { border-color: var(--brand); }
[data-theme="light"] .focus\:ring-accent-500:focus { --tw-ring-color: var(--brand); }

/* Translucent tints (icon-badge backgrounds, alert boxes) */
[data-theme="light"] .bg-accent-500\/10 { background-color: color-mix(in srgb, var(--brand) 10%, transparent); }
[data-theme="light"] .bg-accent-500\/15 { background-color: color-mix(in srgb, var(--brand) 15%, transparent); }
[data-theme="light"] .bg-accent-500\/20,
[data-theme="light"] .group:hover .group-hover\:bg-accent-500\/20 { background-color: color-mix(in srgb, var(--brand) 20%, transparent); }
[data-theme="light"] .bg-accent-900\/30 { background-color: color-mix(in srgb, var(--brand-active) 30%, transparent); }
[data-theme="light"] .bg-accent-900\/40 { background-color: color-mix(in srgb, var(--brand-active) 40%, transparent); }
[data-theme="light"] .bg-accent-900\/50 { background-color: color-mix(in srgb, var(--brand-active) 50%, transparent); }

/* Native form-control tint (checkboxes/radios/range inputs) */
[data-theme="light"] .accent-accent-500,
[data-theme="light"] .accent-accent-600 { accent-color: var(--brand); }

/* =========================================================================
 * Accent → green brand, DARK mode (261003.r5). Same classes as the light
 * block above, same reasoning (indigo was a second, inconsistent brand
 * color next to the homepage's green) — this was the deliberate "dark
 * stays untouched" exception until you asked for it to match too. Lighter
 * shades read as MORE emphasis here (the original indigo scale's own
 * direction — 200 lighter than 400), the opposite of the light block,
 * where darker shades were needed for contrast on a light surface.
 * ========================================================================= */
[data-theme="dark"] .text-accent-400 { color: var(--brand); }
[data-theme="dark"] .text-accent-300 { color: var(--brand-light); }
[data-theme="dark"] .text-accent-200 { color: var(--brand-lighter); }
[data-theme="dark"] .hover\:text-accent-400:hover { color: var(--brand-light); }
[data-theme="dark"] .hover\:text-accent-300:hover { color: var(--brand-lighter); }
[data-theme="dark"] .hover\:text-accent-200:hover { color: var(--brand-lightest); }
[data-theme="dark"] .group:hover .group-hover\:text-accent-400 { color: var(--brand-light); }
[data-theme="dark"] .group:hover .group-hover\:text-accent-300 { color: var(--brand-lighter); }

[data-theme="dark"] .bg-accent-400,
[data-theme="dark"] .bg-accent-500,
[data-theme="dark"] .bg-accent-600 { background-color: var(--brand-fill); color: #fff; }
[data-theme="dark"] .bg-accent-700 { background-color: var(--brand-fill-hover); color: #fff; }
[data-theme="dark"] .hover\:bg-accent-600:hover,
[data-theme="dark"] .hover\:bg-accent-700:hover { background-color: var(--brand-fill-hover); }
[data-theme="dark"] .active\:bg-accent-800:active { background-color: var(--brand-fill-active); }
[data-theme="dark"] .bg-accent-600\/80 { background-color: var(--brand-fill); opacity: .8; }

[data-theme="dark"] .border-accent-500,
[data-theme="dark"] .border-accent-600 { border-color: var(--brand); }
[data-theme="dark"] .border-accent-700 { border-color: var(--brand-fill-hover); }
[data-theme="dark"] .border-accent-500\/30 { border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
[data-theme="dark"] .hover\:border-accent-500:hover,
[data-theme="dark"] .hover\:border-accent-600:hover { border-color: var(--brand-light); }
[data-theme="dark"] .focus\:border-accent-500:focus,
[data-theme="dark"] .focus-within\:border-accent-500:focus-within { border-color: var(--brand); }
[data-theme="dark"] .focus\:ring-accent-500:focus { --tw-ring-color: var(--brand); }

[data-theme="dark"] .bg-accent-500\/10 { background-color: color-mix(in srgb, var(--brand) 10%, transparent); }
[data-theme="dark"] .bg-accent-500\/15 { background-color: color-mix(in srgb, var(--brand) 15%, transparent); }
[data-theme="dark"] .bg-accent-500\/20,
[data-theme="dark"] .group:hover .group-hover\:bg-accent-500\/20 { background-color: color-mix(in srgb, var(--brand) 20%, transparent); }
[data-theme="dark"] .bg-accent-900\/30 { background-color: color-mix(in srgb, var(--brand-fill-active) 30%, transparent); }
[data-theme="dark"] .bg-accent-900\/40 { background-color: color-mix(in srgb, var(--brand-fill-active) 40%, transparent); }
[data-theme="dark"] .bg-accent-900\/50 { background-color: color-mix(in srgb, var(--brand-fill-active) 50%, transparent); }

[data-theme="dark"] .accent-accent-500,
[data-theme="dark"] .accent-accent-600 { accent-color: var(--brand); }

/* Logo mark gradient, dark mode — emerald-400 to emerald-600, same subtle
   two-step feel as the original indigo-500→600 gradient. */
[data-theme="dark"] { --logo-grad-1: #34d399; --logo-grad-2: #059669; }

/* Semantic status text (success/error/warning/info badges — e.g. the
   privacy-badge component on every tool page): same "invert to a darker
   shade of the same hue" principle. Found via direct visual testing — the
   privacy badge's green-300/80 message text was nearly invisible on its
   own light-green-tinted background before this. */
[data-theme="light"] .text-green-400 { color: #15803d; }
[data-theme="light"] .text-green-300 { color: #166534; }
[data-theme="light"] .text-green-300\/80 { color: #166534; }
[data-theme="light"] .text-green-300\/60 { color: #166534; }
[data-theme="light"] .text-green-200 { color: #14532d; }
[data-theme="light"] .text-red-400 { color: #b91c1c; }
[data-theme="light"] .text-red-300 { color: #991b1b; }
[data-theme="light"] .text-red-200 { color: #7f1d1d; }
[data-theme="light"] .text-yellow-400 { color: #a16207; }
[data-theme="light"] .text-yellow-300 { color: #854d0e; }
[data-theme="light"] .text-yellow-300\/80 { color: #854d0e; }
[data-theme="light"] .text-blue-400 { color: #1d4ed8; }
[data-theme="light"] .text-blue-300 { color: #1e40af; }

/* Opacity-modified panel/toolbar backgrounds — checked each actual usage
   (grep) rather than assuming: these are nested panels, tab-group
   containers and toolbar strips, not modal backdrops, so they get the
   same light treatment. The one true full-screen busy/loading overlay
   (bg-gray-900/70, pdf-editor's #busyOverlay) is deliberately NOT listed
   here — a dimming scrim should stay dark regardless of theme. */
[data-theme="light"] .bg-gray-900\/40 { background-color: var(--surface-200); }
[data-theme="light"] .bg-gray-900\/50 { background-color: var(--surface-200); }
[data-theme="light"] .bg-gray-900\/60 { background-color: var(--surface-200); }
[data-theme="light"] .bg-gray-800\/50 { background-color: var(--surface-100); }
[data-theme="light"] .bg-gray-800\/60 { background-color: var(--surface-100); }
[data-theme="light"] .bg-gray-800\/95 { background-color: var(--surface-200); }
/* Active-tab-style indicators (e.g. the Text/File toggle on hash-generator
   and others) — need visible contrast against a plain white inactive tab. */
[data-theme="light"] .bg-gray-700\/50 { background-color: var(--border); }
[data-theme="light"] .bg-gray-700\/40 { background-color: var(--border); }