:root {
  --color-primary: #3b82f6;
  --color-primary-hover: #3575dd;
  --color-primary-active: #2f68c5;
  --color-primary-subtle: #d8e6fd;
  --color-primary-muted: #76a8f9;
  --color-primary-highlight: #b1cdfb;

  --color-secondary: #6366f1;
  --color-secondary-hover: #595cd9;
  --color-secondary-active: #4f52c1;
  --color-secondary-subtle: #e0e0fc;
  --color-secondary-muted: #9294f5;
  --color-secondary-highlight: #c1c2f9;

  --color-success: #16a34a;
  --color-success-hover: #149343;
  --color-success-active: #12823b;
  --color-success-subtle: #d0eddb;
  --color-success-muted: #5cbf80;
  --color-success-highlight: #a2dab7;

  --color-warning: #f59e0b;
  --color-warning-hover: #dd8e0a;
  --color-warning-active: #c47e09;
  --color-warning-subtle: #fdecce;
  --color-warning-muted: #f8bb54;
  --color-warning-highlight: #fbd89d;

  --color-danger: #dc2626;
  --color-danger-hover: #c62222;
  --color-danger-active: #b01e1e;
  --color-danger-subtle: #f8d4d4;
  --color-danger-muted: #e76767;
  --color-danger-highlight: #f1a8a8;

  --color-text-base: #0D0D0D;
  --color-text-muted: #595959;
  --color-background: #FFFFFF;
  --color-banner-background: #F4F4F5;
  --color-banner-text: #000000;
  --color-primary-foreground: #ffffff;
  --color-secondary-foreground: #ffffff;
  --color-success-foreground: #ffffff;
  --color-warning-foreground: #000000;
  --color-danger-foreground: #ffffff;
}