/* Light theme for static SEO pages.
   Token values match html.light in src/index.css.
   Muted is zinc-400 (#52525b), not zinc-500 (#71717a): zinc-500 is 4.40:1 on the #f4f4f5 card.
   Accent text is app cyan-800 (#086682): app cyan-700 (#04809d) is 4.17:1 on that card.
   Wordmark red in the light PNG is #d80216 (passes AA). Do not paint small text with #fd262d (3.82:1 on white). */

html.light {
  color-scheme: light;
  --bg: #ffffff;
  --fg: #09090b;
  --muted: #52525b;
  --line: #e4e4e7;
  --card: #f4f4f5;
  --accent-text: #086682;
  --good: #047857;
  --bad: #be123c;
  --input: #ffffff;
  --ghost: #f4f4f5;
  --footer-link: #18181b;
  --code-bg: #f4f4f5;
  --code-fg: #18181b;
  --hero-border: #d4d4d8;
  --chart-line: #086682;
  --chart-grid: #e4e4e7;
  --chart-label: #52525b;
  --chart-good: #047857;
  --chart-bad: #be123c;
}

html.light .accent-cyan { --accent-text: #086682; }
html.light .accent-mint { --accent-text: #047857; }
html.light .accent-amber { --accent-text: #92400e; }
html.light .accent-violet { --accent-text: #7c00cc; }

html.light .tone-orange { color: #c2410c; }
html.light .tone-mint { color: #047857; }
html.light .tone-cyan { color: #086682; }
html.light .tone-violet { color: #7c00cc; }
html.light .tone-pink { color: #be185d; }
html.light .tone-amber { color: #92400e; }

html.light .btn-ghost {
  background: var(--ghost);
  color: var(--fg);
  border-color: #d4d4d8;
}

html.light .card,
html.light .fact-card,
html.light .example,
html.light .result,
html.light .newsletter-slot,
html.light .author-bio {
  background: var(--card);
}

html.light input,
html.light select,
html.light textarea,
html.light .seg span {
  background: var(--input);
  color: var(--fg);
  border-color: #d4d4d8;
}

html.light .seg input:checked + span {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}

html.light footer a,
html.light ul.guide-catalog a {
  color: var(--footer-link);
}

html.light ul.guide-catalog a:hover {
  color: var(--accent-text);
}

html.light .prose code,
html.light code {
  background: var(--code-bg);
  color: var(--code-fg);
  border-color: var(--line);
}

html.light .prose pre {
  background: var(--code-bg);
  color: var(--code-fg);
  border-color: #d4d4d8;
}

html.light .prose pre code {
  background: transparent;
  border: 0;
}

html.light .prose td { color: #27272a; }
html.light .prose th { color: var(--fg); }
html.light .prose .fact-card p { color: #27272a; }
html.light .prose .fact-card p.fact-label { color: var(--muted); }

html.light .prose img,
html.light .shot img,
html.light article > img {
  border: 1px solid var(--hero-border);
  border-radius: 1rem;
}

html.light .shot img {
  border-radius: 1.25rem;
  background: var(--card);
}

.brand { position: relative; }

/* Beats `.brand img` (36px square) and a bare `.edge-mark { display: block }`. */
a.brand img.edge-mark {
  display: block;
  height: 32px;
  width: auto;
  max-width: none;
  border-radius: 0;
  object-fit: contain;
  flex-shrink: 0;
}
a.brand img.edge-mark.edge-mark--light { display: none; }
html.light a.brand img.edge-mark.edge-mark--dark { display: none; }
html.light a.brand img.edge-mark.edge-mark--light { display: block; }

.brand-name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}