:root {
  --ids-base-color-black: #000000;
  --ids-base-color-white: #ffffff;
  --ids-base-color-blue-50: #ebf6ff;
  --ids-base-color-blue-100: #cce8ff;
  --ids-base-color-blue-600: #2372b8;
  --ids-base-color-blue-700: #005ba8;
  --ids-base-color-blue-800: #004986;
  --ids-base-color-blue-900: #003468;
  --ids-base-color-gray-300: #b2b2b2;
  --ids-base-color-gray-500: #828282;
  --ids-base-color-gray-600: #6d6d6d;
  --ids-base-color-red-600: #d41e27;
  --ids-base-size-border-px: 1px;
  --ids-base-size-border-lg: 8px;
  --ids-base-size-border-radius-sm: 4px;
  --ids-base-space-10: 0.25rem;
  --ids-base-space-20: calc(var(--ids-base-space-10) * 2);
  --ids-base-space-30: calc(var(--ids-base-space-10) * 3);
  --ids-base-space-40: calc(var(--ids-base-space-10) * 4);
  --ids-base-space-160: calc(var(--ids-base-space-10) * 16);
  --ids-base-type-font-sans: "Roboto Flex", Roboto, sans-serif;
  --ids-base-type-leading-snug: 1.3;
  --ids-base-type-leading-compact: 1.15;
  --ids-base-type-size-sm: 0.875rem;
  --ids-base-type-size-md: 1rem;
  --ids-base-type-weight-medium: 500;
  --ids-base-type-weight-semibold: 600;
  --ids-base-type-weight-bold: 700;
  --ids-sem-color-border-muted: var(--ids-base-color-gray-300);
  --ids-sem-color-border-info: var(--ids-base-color-blue-600);
  --ids-sem-color-border-error: var(--ids-base-color-red-600);
  --ids-sem-color-on-surface-info-default: var(--ids-base-color-blue-600);
  --ids-sem-color-on-surface-error-default: var(--ids-base-color-red-600);
  --ids-sem-color-on-surface-muted: var(--ids-base-color-gray-600);
  --ids-sem-color-on-surface-primary: var(--ids-base-color-blue-600);
  --ids-sem-color-primary-50: var(--ids-base-color-blue-50);
  --ids-sem-color-primary-600: var(--ids-base-color-blue-600);
  --ids-sem-color-primary-700: var(--ids-base-color-blue-700);
  --ids-sem-color-primary-900: var(--ids-base-color-blue-900);
  --ids-sem-color-surface-default: var(--ids-base-color-white);
  --ids-sem-color-surface-info: var(--ids-base-color-blue-100);
  --ids-sem-size-border-radius-default: var(--ids-base-size-border-radius-sm);
  --ids-sem-type-font-body: var(--ids-base-type-font-sans);
  --ids-sem-ring-focus: 0 0 0 2px var(--ids-base-color-white), 0 0 0 4px var(--ids-sem-color-primary-700);
}
