:root {

  --accordion-chevron-size: var(--icon-size-md);
  --carousel-arrow-icon-size: var(--icon-size-md);

  --accordion-focus-ring-offset: 2px;
  --carousel-dot-focus-ring-offset: 2px;
  --progress-label-font-size: var(
    --font-size-xs,
    calc(var(--font-size-base) / var(--font-size-ratio))
  );

  --code-block-font-size: var(--font-size-sm, var(--font-size-base));
  --code-block-font-size-xs: var(
    --font-size-xs,
    calc(var(--font-size-base) / var(--font-size-ratio))
  );
  --code-block-line-height: var(--line-height-normal);
  --code-block-space-inset: var(--space-3);
  --code-block-radius: var(--radius-md);
  --code-block-max-height-sm: 12rem;
  --code-block-max-height-md: 20rem;
  --code-block-max-height-lg: 32rem;

  --code-block-foreground: initial;
  --code-block-token-comment-color: initial;
  --code-block-token-keyword-color: initial;
  --code-block-token-string-color: initial;
  --code-block-token-string-expression-color: initial;
  --code-block-token-function-color: initial;
  --code-block-token-constant-color: initial;
  --code-block-token-parameter-color: initial;
  --code-block-token-punctuation-color: initial;
  --code-block-token-link-color: initial;
  --code-block-token-inserted-color: initial;
  --code-block-token-deleted-color: initial;

  --code-block-token-changed-color: initial;

  --prose-font-size: var(--font-size-base);
  --prose-font-size-sm: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
  --prose-line-height: var(--line-height-body);
  --prose-space-block: var(--space-3);
  --prose-heading-space-block-start: var(--space-6);
  --prose-list-space-inline: var(--space-6);
  --prose-list-item-space: var(--space-1);
  --prose-quote-border-width: var(--stroke-md);
  --prose-quote-space-inline: var(--space-3);
  --prose-code-font-size: calc(1em / var(--font-size-ratio));
  --prose-code-space-inline: var(--space-1);
  --prose-code-radius: var(--radius-sm);

  --prose-link-color: initial;

  --prose-link-decoration-line: underline;
  --prose-image-radius: var(--radius-md);
  --timeline-note-font-size: var(
    --font-size-xs,
    calc(var(--font-size-base) / var(--font-size-ratio))
  );

  --avatar-background: initial;

  --avatar-tint: transparent;

  --avatar-size: var(--control-height);

  --avatar-size-xs: var(--control-height-xs);

  --avatar-size-sm: var(--control-height-sm);

  --avatar-size-lg: var(--control-height-lg);

  --avatar-font-size: var(--font-size-base);

  --avatar-font-size-xs: var(
    --font-size-2xs,
    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
  );

  --avatar-font-size-sm: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));

  --avatar-font-size-lg: var(
    --font-size-lg,
    calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
  );

  --avatar-glyph-size-xs: calc(var(--icon-size-xs) * var(--scaling));

  --avatar-glyph-size-sm: calc(var(--icon-size-sm) * var(--scaling));

  --avatar-glyph-size-lg: calc(var(--icon-size-lg) * var(--scaling));

  --avatar-square-radius: var(--radius-lg);
  --avatar-square-size: var(--control-height);
  --avatar-square-background: initial;
  --avatar-square-foreground: initial;

  --avatar-tinted-background: initial;
  --avatar-tinted-foreground: initial;
  --avatar-tinted-glyph-size: var(--control-icon-size);

  --avatar-presence-size: 30%;
  --avatar-presence-min-size: var(--space-2);
  --avatar-presence-inset: 0;
  --avatar-presence-ring-width: var(--stroke-md);
  --avatar-presence-stroke-width: var(--stroke-sm);
  --avatar-presence-bar-inline-size: 56%;
  --avatar-presence-bar-block-size: var(--stroke-sm);
  --avatar-presence-ring-color: initial;
  --avatar-presence-online-color: initial;
  --avatar-presence-away-color: initial;
  --avatar-presence-busy-color: initial;
  --avatar-presence-offline-color: initial;

  --progress-track-background: initial;
  --progress-fill-background: initial;

  --progress-breakdown-block-size: 1.375rem;
  --progress-breakdown-radius: var(--radius);

  --progress-meter-block-size: 0.5rem;
  --progress-meter-block-size-sm: 0.25rem;
  --progress-breakdown-block-size-sm: 0.5rem;

  --progress-ring-size: 2.75rem;
  --progress-ring-size-sm: 2rem;
  --progress-ring-border-width: var(--stroke-lg);

  --progress-ring-label-font-size: initial;

  --legend-gap: 0.875rem;
  --legend-item-gap: 0.3125rem;
  --legend-swatch-size: 0.625rem;
  --legend-swatch-radius: 0.125rem;
  --legend-font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));

  --legend-color: initial;

  --swatch-size: 1rem;
  --swatch-radius: 0.125rem;

  --swatch-border-width: var(--stroke-hairline);

  --swatch-border-color: initial;

  --swatch-color: hsl(var(--muted));

  --feature-list-space-gap: var(--space-stack-sm);

  --feature-list-space-inline: var(--space-inline-sm);
  --feature-list-font-size: var(--font-size-sm, var(--font-size-base));
  --feature-list-description-font-size: var(
    --font-size-xs,
    calc(var(--font-size-base) / var(--font-size-ratio))
  );

  --feature-list-mark-icon-size: var(--icon-size-md);

  --thumbnail-block-size-sm: 4rem;
  --thumbnail-block-size: 6rem;
  --thumbnail-block-size-lg: 10rem;
  --thumbnail-border-width: var(--stroke-hairline);
  --thumbnail-radius: var(--radius);

  --timeline-dot-done-background: initial;
  --timeline-dot-done-foreground: initial;
  --timeline-dot-current-background: initial;
  --timeline-line-completed-background: initial;

  --timeline-dot-current-ring-width: var(--stroke-xl);

  --qr-code-foreground: 0 0% 0%;
  --qr-code-background: 0 0% 100%;
  --qr-code-size-xs: 6rem;
  --qr-code-size-sm: 8rem;
  --qr-code-size-md: 10rem;
  --qr-code-size-lg: 12.5rem;

  --timeline-grid-hour-height: 2.5rem;
  --timeline-grid-axis-width: 3.25rem;
  --timeline-grid-column-min-width: 6rem;

  --timeline-grid-event-min-height-minutes: 36;
  --timeline-grid-axis-font-size: var(
    --font-size-2xs,
    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
  );
  --timeline-grid-head-font-size: var(
    --font-size-xs,
    calc(var(--font-size-base) / var(--font-size-ratio))
  );
  --timeline-grid-event-font-size: var(
    --font-size-2xs,
    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
  );
  --timeline-grid-event-gap: var(--space-1);
  --timeline-grid-event-space-inset: var(--space-1);
  --timeline-grid-event-radius: var(--radius-sm);
  --timeline-grid-event-border-width: var(--stroke-md);
  --timeline-grid-now-width: var(--stroke-sm);

  --timeline-grid-line-color: initial;
  --timeline-grid-event-color: initial;

  --timeline-grid-event-muted-color: hsl(var(--foreground));
  --timeline-grid-now-color: initial;
  --timeline-grid-current-tint: initial;

  --permission-matrix-label-width: 16rem;
  --permission-matrix-role-space-gap: var(--space-1);
  --permission-matrix-name-space-gap: 0.375rem;
  --permission-matrix-cell-icon-size: var(--control-icon-size);

  --permission-matrix-min-width: 48rem;
}

:root {
  --range-timeline-label-width: var(--app-shell-sidebar-width);

  --range-timeline-unit-width: var(--range-timeline-unit-width-default);

  --range-timeline-unit-width-compact: calc(var(--control-height-sm) * 1.5);
  --range-timeline-unit-width-default: calc(var(--control-height-sm) * 2);
  --range-timeline-unit-width-comfortable: calc(var(--control-height-sm) * 2.5);
  --range-timeline-row-height: var(--control-height-lg);
  --range-timeline-bar-height: var(--control-height-sm);

  --range-timeline-border-color: var(--border);

  --range-timeline-grid-color: initial;

  --range-timeline-grid-width: var(--stroke-hairline);

  --range-timeline-muted-column-background: initial;

  --range-timeline-indent-width: var(--space-4);
}