/* Design tokens — single source of truth for color / spacing / radius /
   typography. Every other stylesheet uses these vars, never raw values. */
:root {
  /* Layered dark background. bg-0 is the page, bg-1 is cards/bubbles,
     bg-2 is hover/elevated, bg-3 is code blocks. */
  --bg-0: #0f1012;
  --bg-1: #17191d;
  --bg-2: #1f2228;
  --bg-3: #0c0d0f;

  /* Borders / dividers — translucent so they layer cleanly. */
  --border-1: rgba(255, 255, 255, 0.06);
  --border-2: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* Text. fg-0 primary, fg-1 muted (labels), fg-2 faint (timestamps). */
  --fg-0: #ecedee;
  --fg-1: #a8aab0;
  --fg-2: #6c6e75;

  /* Accents. */
  --accent: #fb923c; /* sd brand orange */
  --accent-soft: rgba(251, 146, 60, 0.14);
  --user: #2f7df2; /* iMessage-ish blue */
  --user-hover: #2667d3;
  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, 0.14);
  --warn: #f87171;
  --warn-soft: rgba(248, 113, 113, 0.14);
  --info: #60a5fa;

  /* Surfaces / radii. */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Spacing — every margin/padding uses one of these. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  /* Type scale. */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
    system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 15px;
  --fs-xl: 17px;
  --lh-tight: 1.35;
  --lh-normal: 1.5;

  /* Elevation. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4);

  /* Motion. */
  --t-fast: 0.12s ease;
  --t-base: 0.2s ease;
}