/* ELAN design tokens (#136) — the single source consumed by the console, the
   dispatch console, and the set-password page (served at /tokens.css; the
   console also links it, dispatch.html/set-password.html link it too).

   Palette aligns with the Expo apps' theme.ts. Brand: ELAN cyan (#00a3e1) and
   ink (#34303d), from the mobile adaptive-icon backgrounds. The accent used for
   text/links/filled buttons is a darker, AA-contrast derivative of the cyan
   (pure cyan is too light to read on white); pure cyan lives in --brand for the
   logo and decorative touches. */
:root {
  /* Brand */
  --brand: #00a3e1;
  --brand-ink: #34303d;

  /* Surfaces + text (monochrome base) */
  --bg: #ffffff;
  --surface: #f4f4f6;
  --sidebar: #f7f7f8;
  --text: #0d0d12;
  --muted: #6b6b73;
  --bubble-me: #e2f2fb;
  --bubble-them: #f4f4f6;
  --border: #e6e6ea;

  /* Accent (AA on white; white text on it passes AA) */
  --accent: #0a72a0;
  --on-accent: #ffffff;

  /* Status */
  --danger: #c62430;
  --warn-bg: #fbefd6;
  --warn-text: #6a4e10;
  --live: #0c7a44;

  /* Interaction */
  --hover: rgba(0, 0, 0, 0.04);
  --active: rgba(10, 114, 160, 0.1);
  --focus: #0a72a0;

  /* Spacing / radius / type (mirrors theme.ts spacing & radius) */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #33b8ec;
    --brand-ink: #d8d5de;
    --bg: #0c0c0f;
    --surface: #17171b;
    --sidebar: #131316;
    --text: #ececee;
    --muted: #9a9aa2;
    --bubble-me: #143247;
    --bubble-them: #1b1b20;
    --border: #26262c;
    --accent: #35b8ec;
    --on-accent: #08191f;
    --danger: #ff7a80;
    --warn-bg: #3a2f12;
    --warn-text: #e9c766;
    --live: #33c27f;
    --hover: rgba(255, 255, 255, 0.05);
    --active: rgba(53, 184, 236, 0.16);
    --focus: #35b8ec;
  }
}

/* Visible keyboard focus everywhere (a11y). */
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}