:root {
    --hd-surface: var(--hd-white);
    --hd-surface-muted: var(--hd-paper);
    --hd-surface-inverse: var(--hd-ink);
    --hd-text: var(--hd-ink);
    --hd-text-muted: var(--hd-grey);
    --hd-text-inverse: var(--hd-white);
    --hd-border: var(--hd-line);
    --hd-focus: var(--hd-ink);

    /* Compatibility variables for commerce scripts that inject class-based UI. */
    --hd-color-white: var(--hd-white);
    --hd-color-off-white: var(--hd-paper);
    --hd-color-black: var(--hd-ink);
    --hd-color-muted: var(--hd-grey);
    --hd-color-line: var(--hd-line);
    --hd-color-line-dark: rgba(255, 255, 255, 0.24);
    --hd-font-display: var(--hd-font-editorial);
    --hd-font-interface: var(--hd-font-sans);
    --hd-content-max: var(--hd-page-max);
    --hd-reading-max: 45rem;
    --hd-edge: var(--hd-gutter);
    --hd-transition-fast: var(--hd-speed-fast) ease;
    --hd-transition-slow: var(--hd-speed-slow) var(--hd-ease-out);
    --hd-page-offset: var(--hd-header-total);
    --ml-ui-primary-color: var(--hd-ink);
    --ml-ui-secondary-color: var(--hd-paper);
    --ml-ui-body-font: var(--hd-font-sans);
    --ml-ui-heading-font: var(--hd-font-editorial);
    --ml-ui-button-radius: 0;
}