/* Design tokens. <header-template> hard-links THIS FILE (plus main.css and
 * base.css) into every page head — all three must exist or every page load
 * 404s three times.
 *
 * Two tiers:
 *   --sd-*        this site's palette, prefixed so it can never collide
 *                 with component defaults (the easy-data-toolkit idiom)
 *   unprefixed    the names the shared web-components styles consume
 *                 (--color-*, --border-radius-*, …), mapped onto the
 *                 --sd-* values so buttons and inputs match the site.
 *
 * On :root, not a wrapper class: custom properties inherit across the
 * shadow boundary, and :root is the one scope every shadow tree sees. */

:root {
  /* dark instrument panel; the dashboard is glanced at, not read */
  --sd-bg: #0d1117;
  --sd-surface: #161b22;
  --sd-log-bg: #0a0d12;
  --sd-line: #2b3240;
  --sd-text: #e6e8ec;
  --sd-dim: #8b94a3;
  --sd-accent: #4dffa6;
  --sd-ok: #3fd68f;
  --sd-warn: #e3b341;
  --sd-err: #f2555a;
  --sd-radius: 8px;

  --sd-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sd-mono: ui-monospace, "JetBrains Mono", "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* what the shared component styles read */
  --color-text: var(--sd-text);
  --color-background: var(--sd-surface);
  --color-border: var(--sd-line);
  --color-primary: var(--sd-accent);
  --font-primary: var(--sd-sans);
  --border-radius-sm: 4px;
  --border-radius-lg: var(--sd-radius);
}

@media (prefers-color-scheme: light) {
  :root {
    --sd-bg: #f6f7f9;
    --sd-surface: #ffffff;
    --sd-log-bg: #eef0f3;
    --sd-line: #d5dae2;
    --sd-text: #1a2029;
    --sd-dim: #5d6673;
    --sd-accent: #0b8a4b;
    --sd-ok: #148f5a;
    --sd-warn: #9a6b00;
    --sd-err: #c62f34;
  }
}