/* Website-owned palette projection. Original Sinter CSS and controls stay exact. */
html:root, html:root[data-theme] {
  --bg: var(--surface-canvas);
  --surface: var(--surface-primary);
  --raised: var(--surface-strong);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border-subtle);
  --border: var(--border-subtle);
  --edge: var(--border-medium);
  --accent: var(--action);
  --accent-text: var(--action-ink);
  --link: var(--cyan-300);
  --focus: var(--cyan-300);
  --success: var(--green-300);
  --danger: var(--red-300);
  --radius: var(--radius-lg);
}
html:root body { font-family: var(--font-sans); }
html:root[data-theme] .button { border-radius: var(--radius-md); }
html:root[data-theme] .button.primary:hover:not(:disabled) { background: var(--action-hover); }
html:root[data-theme] .brand-mark { background: var(--action); color: var(--action-ink); }
html:root[data-theme] .hero h2 span,
html:root[data-theme] .nav-button[aria-current="page"] .nav-icon { color: var(--action); }
html:root[data-theme] .badge.warm { background: var(--raised); color: var(--amber-300); border-color: var(--edge); }
html:root[data-theme] .hero::before {
  background: radial-gradient(circle, var(--control-background-active), transparent 68%);
}
html:root[data-theme] .hero::after {
  border-color: var(--border-subtle);
  box-shadow: 0 0 0 35px var(--control-background), 0 0 0 70px var(--control-background);
}
@media print {
  html:root, html:root[data-theme] {
    color-scheme: light;
    --bg: #fff; --surface: #fff; --raised: #fff;
    --text: #111; --muted: #444; --line: #bbb; --border: #bbb; --edge: #666;
  }
}
@media (forced-colors: active) {
  html:root, html:root[data-theme] {
    color-scheme: light dark;
    --bg: Canvas; --surface: Canvas; --raised: Canvas;
    --text: CanvasText; --muted: CanvasText; --line: CanvasText;
    --border: CanvasText; --edge: CanvasText; --accent: LinkText;
    --accent-text: Canvas; --link: LinkText; --focus: Highlight;
    --success: CanvasText; --danger: CanvasText;
  }
  html:root[data-theme] .button,
  html:root[data-theme] .button.primary,
  html:root[data-theme] .button.primary:hover:not(:disabled) {
    background: ButtonFace; color: ButtonText; border-color: ButtonText;
  }
  html:root[data-theme] .hero::before,
  html:root[data-theme] .hero::after { display: none; }
}