:root {
    --hdc-primary: var(--hdf-color-primary, #f97316);
    --hdc-primary-hover: var(--hdf-color-primary-hover, #ea580c);
    --hdc-button-text: var(--hdf-color-on-primary, #ffffff);
    --hdc-button-hover-text: var(--hdf-color-on-primary-hover, #ffffff);
    --hdc-add-to-cart-background: var(--hdf-button-primary-background, #f97316);
    --hdc-add-to-cart-text: var(--hdf-button-primary-text, #ffffff);
    --hdc-add-to-cart-hover-background: var(--hdf-button-primary-hover-background, #ea580c);
    --hdc-add-to-cart-hover-text: var(--hdf-button-primary-hover-text, #ffffff);
    --hdc-cart-icon-width: 19px;
    --hdc-cart-icon-height: 18px;
    --hdc-cart-icon-color: #ffffff;
    --hdc-download-background: #111827;
    --hdc-download-text: #ffffff;
    --hdc-download-hover-background: #000000;
    --hdc-download-hover-text: #ffffff;
    --hdc-success: var(--hdf-color-success, #16a34a);
    --hdc-danger: var(--hdf-color-error, #dc2626);
    --hdc-text: var(--hdf-color-text, #111827);
    --hdc-muted-text: var(--hdf-color-muted, #6b7280);
    --hdc-page-background: var(--hdf-color-page, #ffffff);
    --hdc-surface: var(--hdf-color-surface, #ffffff);
    --hdc-subtle: var(--hdf-color-subtle, #f3f4f6);
    --hdc-border: var(--hdf-color-border, #e5e7eb);
    --hdc-radius: var(--hdf-radius-md, 14px);
    --hdc-compact-radius: var(--hdf-radius-sm, 8px);
    --hdc-raised-edge-width: var(--hdf-raised-edge-width, 1px);
    --hdc-raised-edge-depth-width: var(--hdf-raised-edge-depth-width, calc(var(--hdc-raised-edge-width) + 1px));
    --hdc-raised-edge-radius: var(--hdf-raised-edge-radius, var(--hdc-radius));
    --hdc-raised-edge-tint: var(--hdf-raised-edge-tint, 4%);
    --hdc-raised-edge-contrast: var(--hdf-raised-edge-contrast, 72%);
    --hdc-raised-edge-outline: var(--hdf-raised-edge-outline, color-mix(in srgb, var(--hdc-muted-text) 18%, var(--hdc-border)));
    --hdc-raised-edge-border: var(--hdf-raised-edge-border, var(--hdc-raised-edge-outline));
    --hdc-raised-edge-light: var(--hdf-raised-edge-light, color-mix(in srgb, #ffffff 64%, var(--hdc-raised-edge-outline)));
    --hdc-raised-edge-dark: var(--hdf-raised-edge-dark, color-mix(in srgb, var(--hdc-muted-text) calc(126% - var(--hdc-raised-edge-contrast)), var(--hdc-raised-edge-outline)));
    --hdc-raised-edge-inner: var(--hdf-raised-edge-inner, color-mix(in srgb, #ffffff 76%, var(--hdc-raised-edge-outline)));
    --hdc-raised-edge-heading-background: var(--hdf-raised-edge-heading-background, color-mix(in srgb, var(--hdc-primary) var(--hdc-raised-edge-tint), var(--hdc-subtle)));
    --hdc-raised-edge-heading-color: var(--hdf-raised-edge-heading-color, var(--hdc-text));
    --hdc-raised-edge-panel-background: var(--hdf-raised-edge-panel-background, var(--hdc-surface));
    --hdc-raised-edge-hover-background: var(--hdf-raised-edge-hover-background, color-mix(in srgb, var(--hdc-primary) 2%, var(--hdc-subtle)));
    --hdc-raised-edge-accent-background: var(--hdf-raised-edge-accent-background, color-mix(in srgb, var(--hdc-primary) 9%, var(--hdc-surface)));
    --hdc-flat-border: var(--hdc-border);
    --hdc-flat-surface: var(--hdc-surface);
    --hdc-flat-hover: color-mix(in srgb, var(--hdc-primary) 2%, var(--hdc-subtle));
    --hdc-button-radius: 999px;
    --hdc-header-dropdown-width: 380px;
    --hdc-selection-dropdown-width: 320px;
    --hdc-header-widget-heading-color: var(--hdf-color-text, var(--hdc-text));
    --hdc-header-widget-action-color: var(--hdf-color-primary-hover, var(--hdc-primary-hover));
    --hdc-header-widget-clear-color: var(--hdf-color-error, var(--hdc-danger));
    --hdc-space-1: 4px;
    --hdc-space-2: 8px;
    --hdc-space-3: 12px;
    --hdc-space-4: 16px;
    --hdc-space-5: 20px;
    --hdc-space-6: 24px;
    --hdc-space-7: 28px;
    --hdc-space-8: 32px;
    --hdc-control-height: 42px;
    --hdc-icon-sm: 16px;
    --hdc-icon-md: 20px;
    --hdc-overlay: rgba(17, 24, 39, 0.68);
    --hdc-transition: 180ms ease;
    --hdc-font-body: var(--hdf-font-body, Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    --hdc-font-heading: var(--hdf-font-heading, "Work Sans", Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    --hdc-font-ui: var(--hdf-font-ui, Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    --hdc-font-weight-body: var(--hdf-font-weight-body, 400);
    --hdc-font-weight-heading: var(--hdf-font-weight-heading, 750);
    --hdc-font-weight-button: var(--hdf-font-weight-button, 750);
}