:root {
  --ai2-color-ink: #1F1F1F;
  --ai2-color-paper: #FFFFFF;
  --ai2-color-surface: #F6F7FB;
  --ai2-color-line: #DADCE0;
  --ai2-color-grey: #5F6368;
  --ai2-color-blue: #4285F4;
  --ai2-color-red: #EA4335;
  --ai2-color-yellow: #FBBC04;
  --ai2-color-green: #34A853;
  --ai2-color-blue-soft: #DCE8FF;
  --ai2-color-navy: #1B2A6B;
  --ai2-font-display: 'Google Sans Flex', 'Google Sans', sans-serif;
  --ai2-font-text: 'Google Sans Flex', 'Google Sans Text', 'Google Sans', sans-serif;
  --ai2-space-4: 4px;
  --ai2-space-8: 8px;
  --ai2-space-12: 12px;
  --ai2-space-16: 16px;
  --ai2-space-24: 24px;
  --ai2-space-32: 32px;
  --ai2-space-48: 48px;
  --ai2-space-64: 64px;
  --ai2-radius-8: 8px;
  --ai2-radius-12: 12px;
  --ai2-radius-16: 16px;
  --ai2-radius-36: 36px;
  --ai2-type-display-56-size: 56px;
  --ai2-type-display-56-weight: 500;
  --ai2-type-display-56-line-height: 1.1;
  --ai2-type-heading-40-size: 40px;
  --ai2-type-heading-40-weight: 500;
  --ai2-type-heading-40-line-height: 1.15;
  --ai2-type-heading-28-size: 28px;
  --ai2-type-heading-28-weight: 500;
  --ai2-type-heading-28-line-height: 1.2;
  --ai2-type-title-20-size: 20px;
  --ai2-type-title-20-weight: 500;
  --ai2-type-title-20-line-height: 1.3;
  --ai2-type-body-16-size: 16px;
  --ai2-type-body-16-weight: 400;
  --ai2-type-body-16-line-height: 1.5;
  --ai2-type-body-14-size: 14px;
  --ai2-type-body-14-weight: 400;
  --ai2-type-body-14-line-height: 1.5;
  --ai2-type-caption-12-size: 12px;
  --ai2-type-caption-12-weight: 400;
  --ai2-type-caption-12-line-height: 1.4;
  --ai2-type-label-11-size: 11px;
  --ai2-type-label-11-weight: 500;
  --ai2-type-label-11-line-height: 1.3;
  --ai2-type-label-11-tracking: 0.06em;
}

[data-theme="dark"] {
  --ai2-color-paper: #111111;
  --ai2-color-surface: #1B1B1F;
  --ai2-color-ink: #F6F7FB;
  --ai2-color-line: #2E3035;
  --ai2-color-grey: #9AA0A6;
  --ai2-color-card: #26272B;
}

.ai2-display-56 {
  font-family: var(--ai2-font-display);
  font-size: var(--ai2-type-display-56-size);
  font-weight: var(--ai2-type-display-56-weight);
  line-height: var(--ai2-type-display-56-line-height);
}

.ai2-heading-40 {
  font-family: var(--ai2-font-display);
  font-size: var(--ai2-type-heading-40-size);
  font-weight: var(--ai2-type-heading-40-weight);
  line-height: var(--ai2-type-heading-40-line-height);
}

.ai2-heading-28 {
  font-family: var(--ai2-font-display);
  font-size: var(--ai2-type-heading-28-size);
  font-weight: var(--ai2-type-heading-28-weight);
  line-height: var(--ai2-type-heading-28-line-height);
}

.ai2-title-20 {
  font-family: var(--ai2-font-text);
  font-size: var(--ai2-type-title-20-size);
  font-weight: var(--ai2-type-title-20-weight);
  line-height: var(--ai2-type-title-20-line-height);
}

.ai2-body-16 {
  font-family: var(--ai2-font-text);
  font-size: var(--ai2-type-body-16-size);
  font-weight: var(--ai2-type-body-16-weight);
  line-height: var(--ai2-type-body-16-line-height);
}

.ai2-body-14 {
  font-family: var(--ai2-font-text);
  font-size: var(--ai2-type-body-14-size);
  font-weight: var(--ai2-type-body-14-weight);
  line-height: var(--ai2-type-body-14-line-height);
}

.ai2-caption-12 {
  font-family: var(--ai2-font-text);
  font-size: var(--ai2-type-caption-12-size);
  font-weight: var(--ai2-type-caption-12-weight);
  line-height: var(--ai2-type-caption-12-line-height);
}

.ai2-label-11 {
  font-family: var(--ai2-font-text);
  font-size: var(--ai2-type-label-11-size);
  font-weight: var(--ai2-type-label-11-weight);
  line-height: var(--ai2-type-label-11-line-height);
  letter-spacing: var(--ai2-type-label-11-tracking);
  text-transform: uppercase;
}