:root {
  /* Brand */

  --brand-navy: #21465f;
  --brand-blue: #2185d0;
  --brand-blue-dark: #1e78be;

  /* Neutral */

  --neutral-white: #fff;
  --neutral-surface: #fafafa;
  --neutral-border: rgba(0, 0, 0, 0.2);
  --neutral-divider: #e5e7eb;
  --neutral-text-primary: #111827;
  --neutral-text-secondary: #475569;
  --neutral-text-disabled: #9ca3af;

  /* Semantic */

  --semantic-success: #56a500;
  --semantic-danger: #e02424;
  --semantic-warning: #f2c043;
  --semantic-info: #3b82f6;
  --semantic-highlight: #f05f2a;

  /* Chart */

  --chart-blue: #2185d0;
  --chart-orange: #f2711c;
  --chart-purple: #6b5cc8;
  --chart-amber: #eda100;
  --chart-green: #1baf7a;
  --chart-gray: #6b7280;
  --chart-red: #e34948;

  /* Labels: a darkened semantic color on a tint of the same color */

  --label-neutral-color: color-mix(in srgb, var(--chart-gray) 90%, black);
  --label-neutral-background: color-mix(in srgb, var(--chart-gray) 8%, white);
  --label-success-color: color-mix(in srgb, var(--semantic-success) 70%, black);
  --label-success-background: color-mix(in srgb, var(--semantic-success) 12%, white);
  --label-warning-color: color-mix(in srgb, var(--semantic-warning) 60%, black);
  --label-warning-background: color-mix(in srgb, var(--semantic-warning) 25%, white);
  --label-danger-color: color-mix(in srgb, var(--semantic-danger) 80%, black);
  --label-danger-background: color-mix(in srgb, var(--semantic-danger) 12%, white);

  --label-positive-foreground: var(--label-success-color);
  --label-positive-background: var(--label-success-background);
  --label-negative-foreground: var(--label-danger-color);
  --label-negative-background: var(--label-danger-background);
  --label-neutral-foreground: var(--label-neutral-color);

  /* Layout */

  --background-primary: var(--neutral-surface);
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --font-size-md: 16px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Buttons */

  --button-width-sm: 88px;
  --button-width-md: 120px;
  --button-width-lg: 160px;
  --button-danger-color: var(--semantic-danger);

  /* Roles */

  --tenant-color: #059669;
  --vendor-color: #eba115;
  --owner-color: #f687da;
  --property-manager-color: #2563eb;
  --unknown-color: var(--chart-gray);
}