:root {
  /* Brand colors */
  --color-teal: #2ABFBF;
  --color-orange: #F5A623;
  --color-orange-hover: #e09415;

  /* Backgrounds */
  --color-bg: #0f0f0f;
  --color-surface: #1a1a1a;
  --color-surface-raised: #1e1e1e;

  /* Text */
  --color-text: rgba(255, 255, 255, 0.85);
  --color-text-muted: rgba(255, 255, 255, 0.45);
  --color-text-placeholder: rgba(255, 255, 255, 0.18);

  /* Borders */
  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-subtle: rgba(255, 255, 255, 0.08);

  /* Font */
  --font: 'DM Sans', system-ui, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Radii */
  --radius-bubble: 20px;
  --radius-bubble-tail: 4px;
  --radius-input: 16px;
  --radius-btn: 10px;

  /* Transitions */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light mode overrides */
@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #f5f5f5;
    --color-surface: #ffffff;
    --color-surface-raised: #ebebeb;
    --color-text: rgba(0, 0, 0, 0.85);
    --color-text-muted: rgba(0, 0, 0, 0.45);
    --color-text-placeholder: rgba(0, 0, 0, 0.25);
    --color-border: rgba(0, 0, 0, 0.07);
    --color-border-subtle: rgba(0, 0, 0, 0.1);
  }
}