:root {
    /* Spacing variables */
    --density: 1; /* use density to scale/reduce sizes */
    --space-half: calc(4px * var(--density));
    --space: calc(var(--space-half) * 2);
    --space-x1_5: calc(var(--space) * 1.5);
    --space-x2: calc(var(--space) * 2);
    --space-x2_5: calc(var(--space) * 2.5);
    --space-x3: calc(var(--space) * 3);
    --space-x4: calc(var(--space) * 4);
    --space-x5: calc(var(--space) * 5);
    --space-x6: calc(var(--space) * 6);
    --space-x7: calc(var(--space) * 7);
    --space-x8: calc(var(--space) * 8);
    --space-x9: calc(var(--space) * 9);
    --space-x10: calc(var(--space) * 10);
    --space-x11: calc(var(--space) * 11);
    --space-x12: calc(var(--space) * 12);

    /* Font families */
    --theme-font: var(--override-font, 'Inter', sans-serif);
    --theme-display-font: var(--override-display-font, var(--theme-font));
    --theme-heading-font: var(--override-heading-font, var(--theme-font));
    --theme-paragraph-font: var(--override-paragraph-font, var(--theme-font));

    /* Font sizes */
    --theme-font-size-scale: var(--override-type-scale, 1);
    --theme-font-size-base: calc(var(--override-font-size-base, 16px) * var(--theme-font-size-scale)); /* 16px */
    --theme-display-30-font-size: calc(var(--theme-font-size-base) * 3.6); /* 64px */
    --theme-display-20-font-size: calc(var(--theme-font-size-base) * 3); /* 48px */
    --theme-display-10-font-size: calc(var(--theme-font-size-base) * 2); /* 32px */
    --theme-heading-30-font-size: calc(var(--theme-font-size-base) * 1.5); /* 24px */
    --theme-heading-20-font-size: calc(var(--theme-font-size-base) * 1.25); /* 20px */
    --theme-heading-10-font-size: calc(var(--theme-font-size-base) * 0.875); /* 14px */
    --theme-paragraph-30-font-size: var(--theme-font-size-base); /* 16px */
    --theme-paragraph-20-font-size: calc(var(--theme-font-size-base) * 0.875); /* 14px */
    --theme-paragraph-10-font-size: max(calc(var(--theme-font-size-base) * 0.75), 12px); /* 12px */

    /* Icon sizes */
    --theme-icon-50-font-size: calc(var(--theme-font-size-base) * 2.375); /* 38px */
    --theme-icon-40-font-size: calc(var(--theme-font-size-base) * 2); /* 32px */
    --theme-icon-30-font-size: calc(var(--theme-font-size-base) * 1.375); /* 22px */
    --theme-icon-20-font-size: calc(var(--theme-font-size-base) * 1.25); /* 20px */
    --theme-icon-10-font-size: calc(var(--theme-font-size-base) * 0.875); /* 14px */

    /* Font weights */
    --theme-font-weight-base: var(--override-font-weight-base, 500);
    --theme-font-weight-light: calc(var(--theme-font-weight-base) - 100);
    --theme-font-weight-medium: var(--theme-font-weight-base);
    --theme-font-weight-semibold: calc(var(--theme-font-weight-base) + 100);
    --theme-font-weight-bold: calc(var(--theme-font-weight-base) + 200);

    /* Display font 64px, 48px, 32px */
    --theme-display-30: var(--theme-font-weight-bold) var(--theme-display-30-font-size) / 1 var(--theme-display-font);
    --theme-display-20: var(--theme-font-weight-bold) var(--theme-display-20-font-size) / 1.15 var(--theme-display-font);
    --theme-display-10: var(--theme-font-weight-bold) var(--theme-display-10-font-size) / 1.25 var(--theme-display-font);

    /* Heading 24px */
    --theme-heading-30: var(--theme-font-weight-bold) var(--theme-heading-30-font-size) / 1.15 var(--theme-heading-font);
    --theme-heading-30-semibold: var(--theme-font-weight-semibold) var(--theme-heading-30-font-size) / 1.15 var(--theme-heading-font);
    --theme-heading-30-medium: var(--theme-font-weight-medium) var(--theme-heading-30-font-size) / 1.15 var(--theme-heading-font);

    /* Heading 20px */
    --theme-heading-20: var(--theme-font-weight-bold) var(--theme-heading-20-font-size) / 1.1 var(--theme-heading-font);
    --theme-heading-20-semibold: var(--theme-font-weight-semibold) var(--theme-heading-20-font-size) / 1.1 var(--theme-heading-font);
    --theme-heading-20-medium: var(--theme-font-weight-medium) var(--theme-heading-20-font-size) / 1.1 var(--theme-heading-font);
    --theme-heading-20-light: var(--theme-font-weight-light) var(--theme-heading-20-font-size) / 1.1 var(--theme-heading-font);

    /* Heading 14px */
    --theme-heading-10: var(--theme-font-weight-bold) var(--theme-paragraph-20-font-size) / 1.25 var(--theme-heading-font);

    /* Paragraph 16px */
    --theme-paragraph-30: var(--theme-font-weight-light) var(--theme-paragraph-30-font-size) / 1.5 var(--theme-paragraph-font);
    --theme-paragraph-30-medium: var(--theme-font-weight-medium) var(--theme-paragraph-30-font-size) / 1.5 var(--theme-paragraph-font);
    --theme-paragraph-30-semibold: var(--theme-font-weight-semibold) var(--theme-paragraph-30-font-size) / 1.5 var(--theme-paragraph-font);
    --theme-paragraph-30-bold: var(--theme-font-weight-bold) var(--theme-paragraph-30-font-size) / 1.5 var(--theme-paragraph-font);

    /* Paragraph 14px */
    --theme-paragraph-20: var(--theme-font-weight-light) var(--theme-paragraph-20-font-size) / 1.5 var(--theme-paragraph-font);
    --theme-paragraph-20-medium: var(--theme-font-weight-medium) var(--theme-paragraph-20-font-size) / 1.5 var(--theme-paragraph-font);
    --theme-paragraph-20-semibold: var(--theme-font-weight-semibold) var(--theme-paragraph-20-font-size) / 1.5 var(--theme-paragraph-font);
    --theme-paragraph-20-bold: var(--theme-font-weight-bold) var(--theme-paragraph-20-font-size) / 1.5 var(--theme-paragraph-font);

    /* Paragraph 12px */
    --theme-paragraph-10: var(--theme-font-weight-light) var(--theme-paragraph-10-font-size) / 1.5 var(--theme-paragraph-font);
    --theme-paragraph-10-medium: var(--theme-font-weight-medium) var(--theme-paragraph-10-font-size) / 1.5 var(--theme-paragraph-font);
    --theme-paragraph-10-semibold: var(--theme-font-weight-semibold) var(--theme-paragraph-10-font-size) / 1.5 var(--theme-paragraph-font);
    --theme-paragraph-10-bold: var(--theme-font-weight-bold) var(--theme-paragraph-10-font-size) / 1.5 var(--theme-paragraph-font);

    /* Display letter spacing */
    --theme-display-30-letter-spacing: var(--override-display-30-letter-spacing, -0.04em);
    --theme-display-20-letter-spacing: var(--override-display-20-letter-spacing, -0.03em);
    --theme-display-10-letter-spacing: var(--override-display-10-letter-spacing, -0.025em);

    /* Heading letter spacing */
    --theme-heading-30-letter-spacing: var(--override-heading-30-letter-spacing, -0.005em);
    --theme-heading-20-letter-spacing: var(--override-heading-20-letter-spacing, 0);
    --theme-heading-10-letter-spacing: var(--override-heading-10-letter-spacing, 0);

    /* Paragraph letter spacing */
    --theme-paragraph-30-letter-spacing: var(--override-paragraph-30-letter-spacing, 0);
    --theme-paragraph-20-letter-spacing: var(--override-paragraph-20-letter-spacing, 0);
    --theme-paragraph-10-letter-spacing: var(--override-paragraph-10-letter-spacing, 0.01em);

    /* Market color variables */
    --market-white: #fff;
    --market-black: #000;
    --market-white-alpha-15: rgba(255, 255, 255, 15%);
    --market-white-alpha-30: rgba(255, 255, 255, 30%);
    --market-white-alpha-55: rgba(255, 255, 255, 55%);
    --market-white-alpha-95: rgba(255, 255, 255, 95%);
    --market-black-alpha-03: rgba(0, 0, 0, 3%);
    --market-black-alpha-05: rgba(0, 0, 0, 5%);
    --market-black-alpha-10: rgba(0, 0, 0, 10%);
    --market-black-alpha-15: rgba(0, 0, 0, 15%);
    --market-black-alpha-30: rgba(0, 0, 0, 30%);
    --market-black-alpha-55: rgba(0, 0, 0, 55%);
    --market-black-alpha-80: rgba(0, 0, 0, 80%);
    --market-black-alpha-90: rgba(0, 0, 0, 90%);
    --market-text-10: var(--market-black-alpha-90);
    --market-text-20: var(--market-black-alpha-55);
    --market-text-30: var(--market-black-alpha-30);
    --market-text-inverse: var(--market-white-alpha-95);
    --market-text-inverse-20: var(--market-white-alpha-55);
    --market-text-black: var(--market-black-alpha-90);
    --market-text-white: var(--market-white);
    --market-fill-10: var(--market-black-alpha-90);
    --market-fill-20: var(--market-black-alpha-30);
    --market-fill-30: var(--market-black-alpha-15);
    --market-fill-35: var(--market-black-alpha-10);
    --market-fill-40: var(--market-black-alpha-05);
    --market-fill-50: var(--market-black-alpha-03);
    --market-fill-inverse: var(--market-white-alpha-95);
    --market-fill-black: var(--market-black-alpha-90);
    --market-fill-white: var(--market-white);
    --market-divider-10: var(--market-black-alpha-30);
    --market-divider-10-inverse: var(--market-white-alpha-30);
    --market-divider-20: var(--market-black-alpha-05);
    --market-divider-20-inverse: var(--market-white-alpha-15);
    --market-light-surface-05: var(--market-white);
    --market-light-surface-10: var(--market-white);
    --market-light-surface-20: var(--market-white);
    --market-light-surface-30: var(--market-white);
    --market-light-surface-inverse: var(--market-black-alpha-90);
    --market-light-surface-overlay: var(--market-black-alpha-80);
    --market-surface-body-overlay: var(--market-white-alpha-15);
    --market-emphasis-fill: #006aff;
    --market-emphasis-text: #005ad9;
    --market-emphasis-10: #0055cc;
    --market-emphasis-20: #005fe5;
    --market-emphasis-30: #cce1ff;
    --market-emphasis-40: #e5f0ff;
    --market-success-fill: #00b23b;
    --market-success-text: #007d2a;
    --market-success-10: #00802a;
    --market-success-20: #009933;
    --market-success-30: #ccffdd;
    --market-success-40: #e5ffee;
    --market-warning-fill: #ff9f40;
    --market-warning-text: #945c25;
    --market-warning-10: #cc8033;
    --market-warning-20: #e58f39;
    --market-warning-30: #ffe5cc;
    --market-warning-40: #fff2e5;
    --market-critical-fill: #cc0023;
    --market-critical-text: #bf0020;
    --market-critical-10: #99001a;
    --market-critical-20: #b2001e;
    --market-critical-30: #ffccd5;
    --market-critical-40: #ffe5ea;
    --market-radius-100: 6px;
    --market-radius-200: 12px;
    --market-radius-circle: 1000px;

    /* Theme variables */
    --theme-emphasis-text: var(--override-emphasis-text, var(--market-emphasis-text));
    --theme-emphasis-fill: var(--override-emphasis-fill, var(--market-emphasis-fill));
    --theme-emphasis-fill-contrast: var(--override-emphasis-fill-contrast, var(--market-white));
    --theme-emphasis-10: var(--override-emphasis-10, var(--market-emphasis-10));
    --theme-emphasis-20: var(--override-emphasis-20, var(--market-emphasis-20));
    --theme-emphasis-30: var(--override-emphasis-30, var(--market-emphasis-30));
    --theme-emphasis-40: var(--override-emphasis-40, var(--market-emphasis-40));
    --theme-success-text: var(--override-success-text, var(--market-success-text));
    --theme-success-fill: var(--override-success-fill, var(--market-success-fill));
    --theme-success-fill-contrast: var(--override-success-fill-contrast, var(--market-white));
    --theme-success-10: var(--override-success-10, var(--market-success-10));
    --theme-success-20: var(--override-success-20, var(--market-success-20));
    --theme-success-30: var(--override-success-30, var(--market-success-30));
    --theme-success-40: var(--override-success-40, var(--market-success-40));
    --theme-warning-text: var(--override-warning-text, var(--market-warning-text));
    --theme-warning-fill: var(--override-warning-fill, var(--market-warning-fill));
    --theme-warning-fill-contrast: var(--override-warning-fill-contrast, var(--market-white));
    --theme-warning-10: var(--override-warning-10, var(--market-warning-10));
    --theme-warning-20: var(--override-warning-20, var(--market-warning-20));
    --theme-warning-30: var(--override-warning-30, var(--market-warning-30));
    --theme-warning-40: var(--override-warning-40, var(--market-warning-40));
    --theme-critical-text: var(--override-critical-text, var(--market-critical-text));
    --theme-critical-fill: var(--override-critical-fill, var(--market-critical-fill));
    --theme-critical-fill-contrast: var(--override-critical-fill-contrast, var(--market-white));
    --theme-critical-10: var(--override-critical-10, var(--market-critical-10));
    --theme-critical-20: var(--override-critical-20, var(--market-critical-20));
    --theme-critical-30: var(--override-critical-30, var(--market-critical-30));
    --theme-critical-40: var(--override-critical-40, var(--market-critical-40));
    --theme-text-10: var(--override-text-10, var(--market-text-10));
    --theme-text-20: var(--override-text-20, var(--market-text-20));
    --theme-text-30: var(--override-text-30, var(--market-text-30));
    --theme-text-inverse: var(--override-text-inverse, var(--market-text-inverse));
    --theme-text-inverse-20: var(--override-text-inverse-20, var(--market-text-inverse-20));
    --theme-text-black: var(--market-black);
    --theme-text-white: var(--market-white);
    --theme-fill-10: var(--override-fill-10, var(--market-fill-10));
    --theme-fill-20: var(--override-fill-20, var(--market-fill-20));
    --theme-fill-30: var(--override-fill-30, var(--market-fill-30));
    --theme-fill-35: var(--override-fill-35, var(--market-fill-35));
    --theme-fill-40: var(--override-fill-40, var(--market-fill-40));
    --theme-fill-50: var(--override-fill-50, var(--market-fill-50));
    --theme-fill-inverse: var(--override-fill-inverse, var(--market-fill-inverse));
    --theme-fill-inverse-solid: var(--override-fill-inverse-solid, var(--market-white));
    --theme-fill-black: var(--market-black);
    --theme-fill-white: var(--market-white);
    --theme-divider-10: var(--override-divider-10, var(--market-divider-10));
    --theme-divider-10-inverse: var(--override-divider-10-inverse, var(--market-divider-10-inverse));
    --theme-divider-20: var(--override-divider-20, var(--market-divider-20));
    --theme-divider-20-inverse: var(--override-divider-20-inverse, var(--market-divider-20-inverse));
    --theme-surface-05: var(--override-surface-05, var(--market-light-surface-05));
    --theme-surface-10: var(--override-surface-10, var(--market-light-surface-10));
    --theme-surface-20: var(--override-surface-20, var(--market-light-surface-20));
    --theme-surface-30: var(--override-surface-30, var(--market-light-surface-30));
    --theme-surface-inverse: var(--override-surface-inverse, var(--market-light-surface-inverse));
    --theme-surface-overlay: var(--override-surface-overlay, var(--market-light-surface-overlay));
    --theme-surface-body-overlay: var(--override-surface-body-overlay, var(--market-surface-body-overlay));
    --theme-elevation-10: 0px 0px 4px 0px var(--theme-fill-35), 0px 1px 2px 0px var(--theme-fill-35);
    --theme-elevation-20: 0px 2px 16px 0px var(--theme-fill-35), 0px 4px 8px 0px var(--theme-fill-35);
    --theme-elevation-30: 0px 4px 32px 0px var(--theme-fill-35), 0px 8px 16px 0px var(--theme-fill-35);

    /* Base color variables */
    --theme-body-color: var(--override-color-background, var(--theme-surface-05));
    --theme-body-text-color: var(--override-color-body-text, var(--theme-text-10));
    --theme-body-text-color-subtle: var(--override-color-body-text-subtle, var(--theme-text-20));
    --theme-body-text-color-contrast: var(--override-color-body-text-contrast, var(--theme-text-inverse));
    --theme-heading-color: var(--override-color-heading, var(--theme-text-10));
    --theme-label-color: var(--override-color-label, var(--theme-text-10));
    --theme-sublabel-color: var(--override-color-sublabel, var(--theme-text-20));
    --theme-link-color: var(--override-emphasis-text, var(--theme-emphasis-text));

    /* Container */
    --theme-max-container: var(--override-container-max-width, 3200px);
    --theme-container-padding: calc(var(--override-container-padding, 0px) + var(--space-x4));

    /* Borders */
    --theme-border-radius-default: var(--override-border-radius-default, var(--market-radius-100));
    --theme-border-radius-default-inner: calc(var(--theme-border-radius-default) - 2px);
    --theme-border-radius-button-compact: var(--override-border-radius-button-compact, var(--market-radius-100));
    --theme-border-radius-button-small: var(--override-border-radius-button-small, var(--market-radius-100));
    --theme-border-radius-button-medium: var(--override-border-radius-button-medium, var(--market-radius-100));
    --theme-border-radius-button-large: var(--override-border-radius-button-large, var(--market-radius-100));
    --theme-border-radius-button-mobile: var(--override-border-radius-button-mobile, var(--market-radius-100));
    --theme-border-radius-input: var(--override-border-radius-input, var(--market-radius-100));
    --theme-border-radius-input-inner: calc(var(--theme-border-radius-input) - 2px);
    --theme-border-radius-input-small: var(--override-border-radius-input-small, var(--market-radius-100));
    --theme-border-radius-input-small-inner: calc(var(--theme-border-radius-input-small) - 2px);
    --theme-border-radius-input-medium: var(--override-border-radius-input-medium, var(--market-radius-100));
    --theme-border-radius-input-medium-inner: calc(var(--theme-border-radius-input-medium) - 2px);
    --theme-border-radius-input-large: var(--override-border-radius-input-large, var(--market-radius-100));
    --theme-border-radius-input-large-inner: calc(var(--theme-border-radius-input-large) - 2px);
    --theme-border-radius-image: var(--override-border-radius-image, var(--market-radius-200));
    --theme-border-radius-card: var(--override-border-radius-card, var(--market-radius-100));
    --theme-border-radius-dialog: var(--override-border-radius-dialog, var(--market-radius-200));
    --theme-border-radius-badge-pill: var(--override-border-radius-badge-pill, var(--market-radius-circle));
    --theme-border-radius-badge-rounded: var(--override-border-radius-badge-rounded, var(--market-radius-200));

    /* Contextual color variables */
    --theme-pill-normal-fill: var(--override-pill-normal-fill, var(--theme-fill-40));
    --theme-pill-normal-fill-hover: var(--override-pill-normal-fill-hover, var(--theme-fill-30));
    --theme-pill-normal-text: var(--override-pill-normal-text, var(--theme-text-20));
    --theme-pill-emphasis-fill: var(--override-pill-emphasis-fill, var(--theme-emphasis-40));
    --theme-pill-emphasis-fill-hover: var(--override-pill-emphasis-fill-hover, var(--theme-emphasis-30));
    --theme-pill-emphasis-text: var(--override-pill-emphasis-text, var(--theme-emphasis-text));
    --theme-pill-success-fill: var(--override-pill-success-fill, var(--theme-success-40));
    --theme-pill-success-fill-hover: var(--override-pill-success-fill-hover, var(--theme-success-30));
    --theme-pill-success-text: var(--override-pill-success-text, var(--theme-success-text));
    --theme-pill-warning-fill: var(--override-pill-warning-fill, var(--theme-warning-40));
    --theme-pill-warning-fill-hover: var(--override-pill-warning-fill-hover, var(--theme-warning-30));
    --theme-pill-warning-text: var(--override-pill-warning-text, var(--theme-warning-text));
    --theme-pill-critical-fill: var(--override-pill-critical-fill, var(--theme-critical-40));
    --theme-pill-critical-fill-hover: var(--override-pill-critical-fill-hover, var(--theme-critical-30));
    --theme-pill-critical-text: var(--override-pill-critical-text, var(--theme-critical-text));

    /* Scrollbar */
    --theme-scrollbar-width: 8px;
    --theme-scrollbar-color: var(--override-color-scrollbar, var(--theme-body-color));
    --theme-scrollbar-thumb-color: var(--override-color-scrollbar-thumb, var(--theme-text-20));

    /* Z-index */
    --theme-z-index-controls: 1;
    --theme-z-index-hover: 1;
    --theme-z-index-overlay: 10;
    --theme-z-index-megamenu-overlay: 1;
    --theme-z-index-header: 2;
    --theme-z-index-main: 1;
    --theme-z-index-action-bar: 1;

    /* Form */
    --theme-form-compact-height: var(--space-x4);
    --theme-form-small-height: var(--space-x5);
    --theme-form-medium-height: var(--space-x6);
    --theme-form-large-height: var(--space-x7);
    --theme-form-border-width: 1px;
    --theme-form-focus-outline-width: 2px;
    --theme-form-focus-outline-color: var(--theme-emphasis-fill);
    --theme-form-collapsible-icon-size: 10px;

    /* Action bar */
    --theme-action-bar-height: 97px;

    /* Dialog */
    --theme-dialog-padding: var(--space-x2);

    /* Card */
    --ui-card-padding: var(--space-x3);
    --ui-card-background: var(--override-color-card-background, var(--theme-surface-10));
}