/* Pool preview brand theme — Dark SaaS (matches site redesign).
   Chrome layout/styles deferred to shared/shear-chrome.css. */

:root,
html[data-theme="dark"] {
  --bg: #07090c; --card: #11161f; --ink: #e8eef4; --muted: #8b9aab;
  --cyan: #5eead4; --blue: #5eead4; --green: #5dcc7a; --banner: rgba(7,9,12,.92);
  --input: #0c1016; --code: #0c1016; --gold: #f0b429;
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #f4f7fa; --card: #ffffff; --ink: #0f172a; --muted: #475569;
  --cyan: #0f766e; --blue: #0f766e; --green: #15803d; --banner: rgba(255,255,255,.92);
  --input: #ffffff; --code: #eef2f6; --gold: #b45309;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg: #07090c; --card: #11161f; --ink: #e8eef4; --muted: #8b9aab;
    --cyan: #5eead4; --blue: #5eead4; --green: #5dcc7a; --banner: rgba(7,9,12,.92);
    --input: #0c1016; --code: #0c1016; --gold: #f0b429;
    color-scheme: dark;
  }
}

.banner-wordmark { height: 36px; width: auto; max-width: 100%; display: block; }
html, body {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  max-width: 100%;
}
h1, h2, .label {
  font-family: "Segoe UI", system-ui, sans-serif;
}
h1 { font-size: 1.28rem; font-weight: 800; }
h2 { font-size: 1.12rem; font-weight: 800; }
.label { font-size: 0.75rem; font-weight: 700; }

/* Nav / toggle / top-banner chrome: shared/shear-chrome.css owns these.
   Keep only minimal form/code helpers here so we do not fight shared light tokens. */
input, select, button { background: var(--input); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
code, pre { background: var(--code); }

img.theme-img-dark { display: none; }
html[data-theme="light"] img.theme-img-light { display: block; }
html[data-theme="light"] img.theme-img-dark { display: none; }
html[data-theme="dark"] img.theme-img-light { display: none; }
html[data-theme="dark"] img.theme-img-dark { display: block; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) img.theme-img-light { display: none; }
  html:not([data-theme="light"]) img.theme-img-dark { display: block; }
}