:root {
  /* Brand */
  --color-brand-red: #F22F46;

  /* Backgrounds */
  --color-bg-page: #0D1117;
  --color-bg-surface: #161B22;
  --color-bg-surface-raised: #1C2128;
  --color-bg-input: #21262D;

  /* Interactive (Twilio Red) */
  --color-interactive: #F22F46;
  --color-interactive-hover: #D01C33;
  --color-interactive-weak: #3D1219;

  /* Text */
  --color-text-primary: #E6EDF3;
  --color-text-secondary: #8B949E;
  --color-text-weak: #484F58;
  --color-text-code: #79C0FF;
  --color-text-link: #58A6FF;

  /* Borders */
  --color-border: #30363D;
  --color-border-strong: #484F58;

  /* Semantic */
  --color-success: #3FB950;
  --color-warning: #D29922;
  --color-error: #F85149;
  --color-gsm7: #3FB950;
  --color-unicode: #D29922;
  --color-rcs: #F22F46;

  /* Segment visualization */
  --color-segment-filled: #F22F46;
  --color-segment-empty: #21262D;
  --color-segment-boundary: #F22F46;

  /* Spacing 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: 48px;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

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