:root {
  /* Primary */
  --primary-100: #D3EEF7;
  --primary-500: #1A7993;
  --primary-hovered: #19768F;

  /* Accent */
  --accent-text: #B35F00; /* accessible dark orange for text on light backgrounds */

  /* Semantic */
  --error-500: #C42020;
  --error-100: #FDEAEA;

  /* Backgrounds */
  --bg-base: #F1F8FA;
  --bg-subtle: #FFFFFF;
  --bg-muted: #F3F4F6;
  --bg-hover: #FFF4E0;

  /* Text */
  --text-primary: #1A1A1A;
  --text-secondary: #4A4A4A;
  --text-tertiary: #6B7280;
  --text-disabled: #9CA3AF;

  /* Borders */
  --border-primary: #D1D5DB;
  --border-light: #E5E7EB;

  /* Buttons — primary */
  --btn-primary-bg: #e8652a;
  --btn-primary-hover: #D94F2B;
  --btn-primary-text: #1A1A1A;

  /* Buttons — secondary */
  --btn-secondary-bg: #FFFFFF;
  --btn-secondary-border: #D1D5DB;
  --btn-secondary-text: #171717;

  /* Inputs */
  --input-bg: #FFFFFF;
  --input-border: #D1D5DB;
  --input-border-focus: #1A7993;
  --input-placeholder: #69768C;

  /* Font */
  --font-mono: 'JetBrains Mono', monospace;

  /* Font sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1em;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.25rem;
  --radius-full: 9999px;
}