/* ── APP / INTERNAL-TOOL LAYER ──────────────────────────────────────────────
   The marketing site is permanently dark, Archivo, no shadows. Grund's internal
   tools (the Marketing Playbook board, grund-marketing/board/template.html) are a
   deliberately different layer: system UI font at 15px, light theme by default,
   real elevation, 10px radius. Same core palette — green #53d183 is the dark-mode
   accent, dark green #2e7348 the light-mode accent, so text on the accent flips.
   Values verbatim from board/template.html.
   Local names there → tokens here: --bg → --app-bg, --fg → --app-fg, etc.        */
:root{
/* Platform UI font — the board ships as one HTML file with no webfont. The source stack
   also names Inter and Roboto; both are dropped here because no binary ships with this
   system and neither is a Grund typeface. Archivo never appears in app chrome. */
--app-font:400 15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
--app-font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
--app-radius:10px;      /* zone body, dialog, floating tool */
--app-radius-sm:8px;    /* cards, chips-hosting boxes, buttons, comments */
--app-radius-xs:6px;    /* verdict icon buttons */
/* light (default) */
--app-bg:#fbfbfb;
--app-bg-raised:#fff;
--app-bg-zone:#f6f6f5;
--app-fg:#101011;
--app-fg-muted:#6b6b6b;
--app-line:#e2e2e2;
--app-line-strong:#cfcfcf;
--app-accent:#2e7348;
--app-accent-soft:#e6f6ec;
--app-accent-ink:#fff;   /* label on a filled accent button */
--app-shadow:0 1px 2px rgba(16,16,17,.06),0 8px 24px rgba(16,16,17,.06);
/* semantic states (same in both themes unless overridden) */
--app-warn:#d8a33a;
--app-warn-ink:#a97a17;
--app-danger:#c0392b;
--app-scrim:rgba(16,16,17,.35);
}
/* System preference. The board honours the reader's OS theme before any explicit choice is
   made, and the first copy of these values into this file dropped that branch — a tool built
   from the design system would have ignored the OS setting while the tool it was copied from
   respected it. Same values as the explicit dark block below. The :not() keeps an <html> pinned
   light out of the query — keep it: on a bare :root the manifest extractor flattens the media
   query and publishes the dark values as the layer's defaults (measured on the canonical
   project, 2026-09-25). */
@media (prefers-color-scheme: dark){
  :root:not([data-app-theme="light"]){
  --app-bg:#101011;
  --app-bg-raised:#17171a;
  --app-bg-zone:#131315;
  --app-fg:#fbfbfb;
  --app-fg-muted:#9a9a9a;
  --app-line:#2a2a2e;
  --app-line-strong:#3a3a40;
  --app-accent:#53d183;
  --app-accent-soft:#16301f;
  --app-accent-ink:#101011;
  --app-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --app-warn-ink:#e0b455;
  --app-danger:#e07a6a;
  }
}
/* Explicit choices — ThemeToggle writes data-app-theme on <html>. The light block repeats the
   :root values so that light can also be pinned on an element INSIDE a dark page: a card that
   shows light and dark side by side, or a light panel in a dark-OS window. Without it only
   <html> could be pinned light. Taken from the canonical project, where the in-app agent added
   it during the 2026-09-25 self-check. */
[data-app-theme="light"]{
--app-bg:#fbfbfb;
--app-bg-raised:#fff;
--app-bg-zone:#f6f6f5;
--app-fg:#101011;
--app-fg-muted:#6b6b6b;
--app-line:#e2e2e2;
--app-line-strong:#cfcfcf;
--app-accent:#2e7348;
--app-accent-soft:#e6f6ec;
--app-accent-ink:#fff;
--app-shadow:0 1px 2px rgba(16,16,17,.06),0 8px 24px rgba(16,16,17,.06);
--app-warn-ink:#a97a17;
--app-danger:#c0392b;
}
[data-app-theme="dark"]{
--app-bg:#101011;
--app-bg-raised:#17171a;
--app-bg-zone:#131315;
--app-fg:#fbfbfb;
--app-fg-muted:#9a9a9a;
--app-line:#2a2a2e;
--app-line-strong:#3a3a40;
--app-accent:#53d183;
--app-accent-soft:#16301f;
--app-accent-ink:#101011;
--app-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
--app-warn-ink:#e0b455;
--app-danger:#e07a6a;
}