:root {
  --component-card-radius: var(--radius-lg);
  --component-card-border: var(--color-border-default);
  --component-card-bg: var(--color-surface-container);
  --component-card-text: var(--color-content-primary);
  --component-card-padding: var(--spacing-16);
  --component-card-gap: var(--spacing-8);
  --component-card-label-size: var(--font-size-7);
  --component-card-label-line-height: var(--font-line-height-7);
  --component-card-label-text: var(--color-content-assist);
  --component-card-value-size: var(--font-size-2);
  --component-card-value-line-height: var(--font-line-height-2);
  --component-card-value-font: var(--font-family-numeric);
  --component-card-icon-size: 32px;
  --component-card-icon-glyph: 16px;
  --component-card-icon-radius: var(--radius-md);
  --component-card-icon-bg: var(--color-brand-soft);
  --component-card-icon-text: var(--color-brand-active);
  --component-card-trend-size: var(--font-size-7);
  --component-card-trend-line-height: var(--font-line-height-7);
  --component-card-trend-up: var(--color-status-success);
  --component-card-trend-down: var(--color-status-warning);
  --component-card-result-width: 196px;
  --component-card-result-padding-block: 12px;
  --component-card-result-padding-inline: var(--spacing-16);
  --component-card-result-gap: var(--spacing-8);
  --component-card-result-radius: var(--radius-md);
  --component-card-result-title: #28282a;
  --component-card-result-count: #a1a1a1;
  --component-card-result-meta: #737373;
  --component-card-result-optimize: var(--color-success-normal);
  --component-card-result-flat: #737373;
  --component-card-result-regress: var(--color-error-normal);
  --component-card-result-regress-icon: #f72d2a;
  --component-card-title-size: var(--font-size-5);
  --component-card-title-line-height: var(--font-line-height-7);
  --component-card-description-size: var(--font-size-7);
  --component-card-description-text: var(--color-content-assist);
}