/* Design tokens — the ONLY place colors, spacing and radii are defined.
 *
 * These are CSS custom properties on :root, which means they are inherited
 * INTO shadow DOM. That is the whole trick: a Lit component's styles are
 * isolated from base.css, but var(--vp-*) still resolves. So every component
 * gets the design system for free, and nothing else leaks.
 *
 * Never write a raw color or pixel value in a component. Add a token here.
 *
 * The palette matches operations/client-dashboard so the two apps look
 * related. If you change a color, change it there too.
 */
:root {
  /* Brand */
  --vp-brand: #002424;
  --vp-brand-light: #007070;
  --vp-accent: #d5f1a8;

  /* Surfaces */
  --vp-bg: #f0f4f2;
  --vp-surface: #ffffff;
  --vp-surface-sunken: #f7faf9;
  --vp-border: #d8e4e0;

  /* Text */
  --vp-text: #1a2929;
  --vp-muted: #6a7878;
  --vp-on-brand: #ffffff;

  /* Status */
  --vp-danger: #b53737;
  --vp-warn: #c97a1a;
  --vp-success: #2f7d54;

  /* Shape */
  --vp-radius: 10px;
  --vp-radius-sm: 6px;
  --vp-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.06);

  /* Spacing scale — use these, not arbitrary rem values */
  --vp-space-1: 0.25rem;
  --vp-space-2: 0.5rem;
  --vp-space-3: 0.75rem;
  --vp-space-4: 1rem;
  --vp-space-5: 1.5rem;
  --vp-space-6: 2rem;
  --vp-space-7: 3rem;

  /* Type
   *
   * System font stacks only — no webfont. See docs/frontend-standard.md,
   * "Static assets," for why: a font referenced here but not shipped as a
   * tracked asset is an implied dependency that works on whichever machine
   * happens to have it installed and silently falls back everywhere else. */
  --vp-font: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vp-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --vp-text-sm: 0.875rem;
  --vp-text-xs: 0.75rem;
  --vp-text-lg: 1.125rem;

  /* Layout */
  --vp-page-max: 1100px;
}