/* D-02: single source of truth for colour, type, and space tokens.
 * Dark-first — the site has always been dark, so dark is the default :root and
 * a prefers-color-scheme:light block layers a light palette on top. Every hex
 * value the apex pages used lives here; pages reference these tokens so colour
 * never drifts per-page again (enforced by qa/check-content.sh).
 *
 * D-03: the .badge status vocabulary (live/early/planned/none-yet) lives here
 * too, so every capability claim renders one consistent, text-labelled badge. */

:root {
  color-scheme: dark;

  /* colour — semantic roles (values are the existing solnix palette) */
  --bg:          #0d1117;   /* page background            (was --bg)     */
  --bg-subtle:   #161b22;   /* raised panels/cards        (was --panel)  */
  --surface:     #1c2330;   /* pills, deeper surfaces     (was --panel2) */
  --border:      #2a3441;   /* hairlines                  (was --line)   */
  --text:        #e6edf3;   /* body text                  (was --ink)    */
  --text-muted:  #9aa7b4;   /* secondary text             (was --dim)    */
  --accent:      #7ee787;   /* primary accent / "live"    (was --accent) */
  --accent-hover:#6fd67a;   /* accent hover               */
  --link:        #58a6ff;   /* links                      (was --accent2)*/
  --nix:         #5277c3;   /* brand: Nix blue            */
  --illumos:     #ff6b35;   /* brand: illumos orange      */
  --ok:          #7ee787;   /* status: live               */
  --warn:        #f0b429;   /* status: early              */
  --danger:      #ff6b35;   /* status: broken/error       */
  --code-bg:     #0a0d12;   /* code block background      */
  --code-text:   #c9d4e0;   /* code block foreground      */
  --on-accent:   #08210f;   /* text on an --accent fill   */

  /* type */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --step--1: 12px;
  --step-0:  14px;   /* base UI size the pages use */
  --step-1:  17px;
  --step-2:  20px;
  --step-3:  32px;
  --step-4:  clamp(34px, 8vw, 52px);   /* hero */
  --leading-tight:  1.1;
  --leading-normal: 1.6;

  /* space (4px scale) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 52px;

  /* other */
  --radius: 10px;
  --radius-lg: 14px;
  --measure: 68ch;
}

/* Dark-first: dark is the default above. Keep an explicit light override for
 * visitors who ask for it; the apex pages read as dark so this is opt-in. */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg:         #ffffff;
    --bg-subtle:  #f4f6f8;
    --surface:    #eaeef2;
    --border:     #d0d7de;
    --text:       #1f2328;
    --text-muted: #57606a;
    --code-bg:    #f4f6f8;
    --code-text:  #24292f;
    --on-accent:  #08210f;
  }
}

/* D-03: one status badge, four states, each with a text label (never colour
 * alone — a11y A11Y-03). Tinted background + solid dot + label. Consumes the
 * status tokens above. The older ad-hoc .tag.ok/.wip/.no aliases map onto
 * these so existing generated markup keeps working. */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--step--1); font-weight: 600;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
.badge.live     { color: var(--ok);         background: rgba(126,231,135,.15); }
.badge.early    { color: var(--warn);       background: rgba(240,180,41,.15); }
.badge.planned  { color: var(--text-muted); background: rgba(154,167,180,.12); }
.badge.none-yet { color: var(--text-muted); background: transparent; border-color: var(--border); }

/* Back-compat aliases for the .tag markup the fragment generators emit. */
.tag { display: inline-flex; align-items: center; gap: 6px;
       font-family: var(--font-mono); font-size: var(--step--1); font-weight: 600;
       padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.tag.ok  { color: var(--ok);         background: rgba(126,231,135,.15); }
.tag.wip { color: var(--warn);       background: rgba(240,180,41,.15); }
.tag.no  { color: var(--text-muted); background: rgba(154,167,180,.12); }

/* A11Y-05 / D-04: respect reduced-motion for any token-driven animation. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}