/* Shared design tokens — the ONE sanctioned cross-shadow-boundary styling
   channel (AGENT.md §1.1). Custom properties inherit into every shadow root, so
   components reference these with var(--…) instead of hardcoding hex. Change a
   token here and the whole UI follows. */

:root {
  color-scheme: dark;

  /* Surfaces & structure */
  --surface-0: #14161a; /* app background */
  --surface-1: #1b1e24; /* panels */
  --surface-2: #242830; /* raised cards */
  --border: #333944;
  --border-strong: #454c59;

  /* Text */
  --color-fg: #e6e9ef;
  --color-fg-muted: #9aa4b2;

  /* Fills / accents */
  --fill-accent: #4a9eff;

  /* Semantic status (AGENT.md §1.1) */
  --color-danger: #ff5c5c;
  --color-danger-bg: #3a1e1e;
  --color-success: #4ade80;
  --color-warning: #f5c451;

  /* Git-state colors */
  --git-clean: var(--color-success);
  --git-dirty: var(--color-warning);
  --git-ahead: #7ab8ff;
  --git-behind: #d08bff;
  --git-conflict: var(--color-danger);

  /* Radii */
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 12px;
}

/* The page shell owns only the app frame; components own everything inside their
   shadow roots. Keep global selectors OUT of components (AGENT.md §1.1). */
body {
  margin: 0;
  background: var(--surface-0);
  color: var(--color-fg);
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

a {
  color: var(--fill-accent);
}