/*
 * Public-site theme contract.
 *
 * Every generated marketing page and the SPA shell load this file. Public
 * page components alias their local semantic names to these tokens, so a new
 * registry page receives both themes from pageShell without page-level work.
 */
:root {
  --aq-public-bg: #f7f4ec;
  --aq-public-card: #fffdf6;
  --aq-public-deep: #efeadf;
  --aq-public-line: rgba(26, 24, 20, 0.16);
  --aq-public-line-soft: rgba(26, 24, 20, 0.09);
  --aq-public-line-strong: rgba(26, 24, 20, 0.3);
  --aq-public-line-strong-heavy: rgba(26, 24, 20, 0.55);
  --aq-public-text-0: #1a1814;
  --aq-public-text-100: #2c2924;
  --aq-public-text-200: #44403a;
  --aq-public-text-300: #5d584e;
  --aq-public-text-400: #736e61;
  --aq-public-text-500: #87816e;
  --aq-public-accent: #e8501e;
  --aq-public-accent-deep: #b23608;
  --aq-public-accent-soft: rgba(232, 80, 30, 0.08);
  --aq-public-accent-line: rgba(232, 80, 30, 0.35);
  --aq-public-green: #0e8f4d;
  --aq-public-green-soft: rgba(14, 143, 77, 0.1);
  --aq-public-ink-rgb: 26, 24, 20;
  --aq-public-nav-bg: rgba(247, 244, 236, 0.82);
  --aq-public-wash: rgba(26, 24, 20, 0.05);
  --aq-public-wash-soft: rgba(26, 24, 20, 0.045);
  --aq-public-tag-neutral-bg: rgba(26, 24, 20, 0.07);
  --aq-public-dot: rgba(26, 24, 20, 0.055);
  --aq-public-code-bg: rgba(26, 24, 20, 0.055);
  --aq-public-primary-hover: #000;
  --aq-public-danger-bg: rgba(220, 38, 38, 0.07);
  --aq-public-danger-line: rgba(220, 38, 38, 0.35);
  --aq-public-danger-text: #b91c1c;
}

html[data-theme="dark"] {
  --aq-public-bg: #101014;
  --aq-public-card: #16161b;
  --aq-public-deep: #0a0a0e;
  --aq-public-line: rgba(255, 255, 255, 0.14);
  --aq-public-line-soft: rgba(255, 255, 255, 0.08);
  --aq-public-line-strong: rgba(255, 255, 255, 0.3);
  --aq-public-line-strong-heavy: rgba(255, 255, 255, 0.42);
  --aq-public-text-0: #f2f1ec;
  --aq-public-text-100: #e4e2da;
  --aq-public-text-200: #c9c9d2;
  --aq-public-text-300: #a3a3ad;
  --aq-public-text-400: #8a8a93;
  /* 4.6:1 against the raised dark card, so even the smallest metadata stays
     readable instead of inheriting the product mock's intentionally faint ink. */
  --aq-public-text-500: #808089;
  --aq-public-accent: #ff6a2b;
  --aq-public-accent-deep: #ff7a45;
  --aq-public-accent-soft: rgba(232, 80, 30, 0.16);
  --aq-public-accent-line: rgba(255, 106, 61, 0.45);
  --aq-public-green: #3ecf6e;
  --aq-public-green-soft: rgba(62, 207, 110, 0.12);
  --aq-public-ink-rgb: 0, 0, 0;
  --aq-public-nav-bg: rgba(16, 16, 20, 0.82);
  --aq-public-wash: rgba(255, 255, 255, 0.06);
  --aq-public-wash-soft: rgba(255, 255, 255, 0.05);
  --aq-public-tag-neutral-bg: rgba(255, 255, 255, 0.07);
  --aq-public-dot: rgba(255, 255, 255, 0.05);
  --aq-public-code-bg: rgba(255, 255, 255, 0.07);
  --aq-public-primary-hover: #fff;
  --aq-public-danger-bg: rgba(248, 113, 113, 0.1);
  --aq-public-danger-line: rgba(248, 113, 113, 0.38);
  --aq-public-danger-text: #fca5a5;
}

/* The signed-in product remains dark-only. Scope native control theming to
   public documents/components rather than changing the product shell. */
html.aq-public-document,
.aq-public-page {
  color-scheme: light;
}
html.aq-public-document[data-theme="dark"],
html[data-theme="dark"] .aq-public-page {
  color-scheme: dark;
}

/* One toggle implementation for the landing page, /signin, and generated
   marketing nav. Glyph visibility is correct from first paint. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  margin-right: 4px;
  border-radius: 99px;
  border: 1px solid var(--line-soft, var(--line, var(--aq-public-line-soft)));
  background: transparent;
  color: var(--text-300, var(--muted, var(--aq-public-text-300)));
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover {
  color: var(--text-0, var(--ink, var(--aq-public-text-0)));
  background: var(--wash, var(--aq-public-wash));
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent, var(--aq-public-accent));
  outline-offset: 2px;
}
.theme-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}