/* --- apps/device-web/public/tokens.css --- */
/*
 * StoveLink design tokens: brand A+ ("StoveLink, by Ownwright"), issue #83.
 * THE ONLY PLACE colours and font stacks are defined. style.css and looks/looks.css use
 * var(--...) only (tests/tokens.test.ts fails on a hex colour anywhere else, and checks
 * WCAG 4.5:1 for every text/background pair below in light, dark and night).
 * Palette source: docs/brand/stovelink-brand-proposals.html, brand "A" pal.
 * Rules: Ember (--accent) only on heat (arc, state, selected level), the "Link" half of
 * the wordmark and at most one primary call to action per screen; main buttons are
 * Woodsmoke (--primary). Errors use --err plus an icon. Cooling uses Ash (--muted), never blue.
 * Fonts are bundled (offline device, never fetched from Google): Latin subsets, SIL OFL,
 * licences next to them in /fonts/.
 */
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/zilla-slab-600.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-sans-3-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/source-sans-3-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

:root {
  /* type: display >= 20 px only; body >= 17 px / 1.5; mono for codes and serials only */
  --font-display: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* light (brand A) */
  --bg: #faf6ef;
  --surface: #ffffff;
  --surface2: #f3ede3;
  --line: #e3d9cb;
  --text: #1f1a16;
  --muted: #5e544a;
  --primary: #2b2621; /* Woodsmoke */
  --on-primary: #faf6ef;
  --accent: #b23a0e; /* Ember: heat only */
  --on-accent: #faf6ef;
  --accent-soft: #f8e7dd;
  --second: #4f5e57;
  --cool: #3d5f73;
  --ok: #2f6b3f;
  --ok-soft: #e6f0e7;
  --warn: #8a5a00;
  --on-warn: #ffffff;
  --warn-soft: #fff4e0;
  --warn-line: #e9c98a;
  --err: #a3123a; /* Rose */
  --on-err: #ffffff;
  --err-soft: #fbe8ed;
  --info-soft: #e5edf2;
  --track: #e3d9cb;
  --shadow: 0 1px 2px rgba(31, 26, 22, 0.06), 0 8px 24px rgba(31, 26, 22, 0.07);
  color-scheme: light;

  /* Fireplace look: always-dark scene art, theme independent */
  --fp-page: #0e0907;
  --fp-ink: #f6ece2;
  --fp-dim: #cdbcaa;
  --fp-body: #e9ddd1;
  --fp-glass: rgba(255, 255, 255, 0.08);
  --fp-glass-hi: rgba(255, 255, 255, 0.12);
  --fp-glass-line: rgba(255, 255, 255, 0.1);
  --fp-link: #b8f0c8;
  --fp-bad: #ff8d8d;
  --fp-on-bad: #1a0606;
  --fp-bad-title: #ffb3b3;
  --fp-warn: #fbbf24;
  --fp-on-warn: #1a1206;
  --fp-warn-title: #fcd34d;
  --fp-info: #9db3a8;
  --fp-on-flame: #1a0f08;
  --fp-flame: #ffb35c;
  --fp-brand-ember: #f2894e; /* Ember on the dark scene: wordmark "Link" + mark ember (= dark --accent) */
  --fp-flame-soft: rgba(255, 150, 60, 0.22);
  --fp-flame-cta: #ff9a4a;
  --fp-pressed: #f6c47a;
  --fp-heat-off: #b5a493;
  --fp-state: #ffd9a8;
  --fp-state-cool: #d6cbbf;
  --fp-state-off: #efe6dc;
  --fp-state-err: #ff9d9d;
  --fp-state-stale: #b5a99d;
  --fp-bg-burn: radial-gradient(120% 60% at 50% 30%, #2a1710 0%, #0e0907 70%);
  --fp-bg-cool: radial-gradient(120% 60% at 50% 30%, #1c1915 0%, #0c0b0a 70%);
  --fp-bg-off: radial-gradient(120% 60% at 50% 30%, #1a1714 0%, #0c0b0a 70%);
  --fp-bg-err: radial-gradient(120% 60% at 50% 30%, #2d0c0a 0%, #0e0707 70%);
  --fp-glow-rgb: 255, 120, 30; /* channels: looks.css adds the live alpha (--g, --e) */
  --fp-ember-rgb: 255, 140, 40;
  --fp-ember-err: rgba(255, 60, 50, 0.8);
  --fp-glow-err: rgba(220, 40, 40, 0.35);
  --fp-logs: linear-gradient(#5b3b29, #24160e);
  --fp-logs-top: linear-gradient(#6b4632, #2c1a10);
  --fp-logs-cold: linear-gradient(#55504b, #2a2724);
  --fp-flame-1: radial-gradient(
    ellipse at 50% 88%,
    #ffdf8a 0%,
    #ff8a1f 34%,
    rgba(225, 55, 0, 0.85) 58%,
    transparent 72%
  );
  --fp-flame-2: radial-gradient(
    ellipse at 50% 88%,
    #ffc46b 0%,
    #ff6a10 40%,
    rgba(200, 40, 0, 0.7) 60%,
    transparent 72%
  );
  --fp-flame-core: radial-gradient(ellipse at 50% 85%, #fffbe8 0%, #ffe9a8 45%, transparent 72%);
  --fp-spark: #ffd27a;
  --fp-wisp: linear-gradient(transparent, rgba(205, 188, 170, 0.5), transparent);
  --fp-shade: #000000;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171412;
    --surface: #221e1a;
    --surface2: #2b2621;
    --line: #3a332d;
    --text: #f3ece2;
    --muted: #b9ac9c;
    --primary: #f3ece2;
    --on-primary: #171412;
    --accent: #f2894e;
    --on-accent: #171412;
    --accent-soft: #3a2318;
    --second: #9db3a8;
    --cool: #8fb4cc;
    --ok: #7cc48e;
    --ok-soft: #17291c;
    --warn: #e9b44c;
    --on-warn: #171412;
    --warn-soft: #33270f;
    --warn-line: #6b5220;
    --err: #ff8aa5;
    --on-err: #171412;
    --err-soft: #3d1620;
    --info-soft: #172630;
    --track: #3a332d;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #171412;
  --surface: #221e1a;
  --surface2: #2b2621;
  --line: #3a332d;
  --text: #f3ece2;
  --muted: #b9ac9c;
  --primary: #f3ece2;
  --on-primary: #171412;
  --accent: #f2894e;
  --on-accent: #171412;
  --accent-soft: #3a2318;
  --second: #9db3a8;
  --cool: #8fb4cc;
  --ok: #7cc48e;
  --ok-soft: #17291c;
  --warn: #e9b44c;
  --on-warn: #171412;
  --warn-soft: #33270f;
  --warn-line: #6b5220;
  --err: #ff8aa5;
  --on-err: #171412;
  --err-soft: #3d1620;
  --info-soft: #172630;
  --track: #3a332d;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

/* Night mode (any theme): no blue light, no bright white; warm text on true black */
body.night {
  --bg: #000000;
  --surface: #0e0906;
  --surface2: #160e09;
  --line: #2a1b12;
  --text: #c98a5e;
  --muted: #a67250;
  --primary: #c98a5e;
  --on-primary: #000000;
  --accent: #d9733f;
  --on-accent: #000000;
  --accent-soft: #24130a;
  --second: #8e7a62;
  --cool: #8c7f8e;
  --ok: #a8a060;
  --ok-soft: #14130a;
  --warn: #d9a040;
  --on-warn: #000000;
  --warn-soft: #1e1508;
  --warn-line: #4a3515;
  --err: #e4675f;
  --on-err: #000000;
  --err-soft: #220b09;
  --info-soft: #141014;
  --track: #2a1b12;
  --shadow: none;
}

/* --- sites/shared/site-tokens.css --- */
/*
 * Site-only tokens for the public sites (#85). The brand tokens and fonts come from
 * apps/device-web/public/tokens.css (#83), copied into each build by tools/sites_build.py,
 * never forked. Only colours tokens.css lacks live here: the always-dark band (the same
 * in light and dark themes, like the Fireplace look) and the DRAFT banner.
 * tools/sites_check.py fails on a hex colour in any other site stylesheet and checks
 * every pair listed in sites/sites.json at WCAG AA.
 */
:root {
  --band-bg: #2b2621;
  --band-text: #f3ece2;
  --band-muted: #b9ac9c;
  --band-accent: #f2894e;
  --band-line: #3a332d;
  --draft-bg: #fff4e0;
  --draft-text: #5c3c00;
  --draft-line: #e9c98a;
}

/* --- sites/shared/base.css --- */
/*
 * Shared layout for the public sites (#85): fluid from 320 px up, no JavaScript.
 * Colours and fonts are var(--...) only (tokens.css + site-tokens.css).
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  line-height: 1.55;
}
img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: var(--accent);
  text-underline-offset: 0.15em;
}
a:focus-visible,
.button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
h1,
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  overflow-wrap: break-word;
}
h1 {
  font-size: clamp(2.375rem, 1.6rem + 3.6vw, 4rem);
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
}
h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}
p {
  margin: 0 0 1rem;
}
p:last-child {
  margin-bottom: 0;
}

.wrap {
  max-width: 75rem;
  margin: 0 auto;
  padding-inline: clamp(1rem, 4vw, 1.5rem);
}
.skip {
  position: absolute;
  left: -100vw;
  top: 0.5rem;
  background: var(--surface);
  color: var(--text);
  padding: 0.5rem 1rem;
  z-index: 10;
}
.skip:focus {
  left: 0.5rem;
}

/* header + nav */
.site-header {
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.625rem;
  line-height: 1;
}
.brand svg {
  width: 2rem;
  height: 2rem;
  flex: none;
}
.brand-link {
  color: var(--accent);
}
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  color: var(--text);
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  text-decoration: underline;
}

/* buttons: one Ember call to action per screen; the rest are outlined Woodsmoke */
.button {
  display: inline-block;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--primary);
  color: var(--primary);
  background: transparent;
}
.button-cta {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.button-cta:hover {
  text-decoration: underline;
}
.site-nav .button-cta {
  color: var(--on-accent);
  padding: 0.5rem 1.1rem;
}

/* sections */
.section {
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.section-alt {
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.band {
  background: var(--band-bg);
  color: var(--band-text);
}
.band a {
  color: var(--band-text);
}
.band .muted {
  color: var(--band-muted);
}
.band .kicker {
  color: var(--band-accent);
}
.stack > * + * {
  margin-top: 1.25rem;
}
.lede {
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.3125rem);
  color: var(--muted);
  max-width: 36em;
}
.muted {
  color: var(--muted);
}
.kicker {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--second);
}
.grid {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}
.placeholder {
  font-style: italic;
  color: var(--muted);
}

/* DRAFT banner on legal pages */
.draft {
  background: var(--draft-bg);
  color: var(--draft-text);
  border: 1px solid var(--draft-line);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-weight: 600;
}

/* prose pages (FAQ, privacy, terms) */
.prose {
  max-width: 44rem;
}
.prose h2 {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.prose ul {
  padding-left: 1.25rem;
}
.faq dt {
  font-weight: 600;
  font-size: 1.1875rem;
  margin-top: 1.75rem;
}
.faq dd {
  margin: 0.35rem 0 0;
  color: var(--muted);
}

/* footer */
.site-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9375rem;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.75rem 2.5rem;
}
.site-footer a {
  color: var(--muted);
}
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.endorse {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
}

/* --- sites/ownwright/site.css --- */
/* Ownwright: neutral Woodsmoke links, Ember only inside the StoveLink card (var(--...) only) */
a {
  color: var(--primary);
}
.brand-ow {
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
}
.ow-hero {
  padding-block: clamp(3.5rem, 9vw, 6rem) clamp(3rem, 8vw, 5.5rem);
  border-bottom: 1px solid var(--line);
}
.ow-hero h1 {
  font-size: clamp(3.5rem, 1.5rem + 9vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.say {
  color: var(--second);
}
.product-card {
  display: grid;
  gap: 0.75rem;
  max-width: 46rem;
  padding: clamp(1.5rem, 4vw, 2rem);
  border-radius: 1.25rem;
  text-decoration: none;
}
.product-card:hover .product-go {
  text-decoration: underline;
}
.product-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.product-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 1.8rem + 2vw, 2.75rem);
  line-height: 1.1;
}
.brand-link-band {
  color: var(--band-accent);
}
.product-go {
  font-weight: 600;
}
.pillars-short li {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  border-top: 2px solid var(--primary);
  padding-top: 0.5rem;
}
.pillars h2 {
  font-size: 1.375rem;
  margin-bottom: 0.4rem;
}