:root {
    /* Salesforce DXP hooks remain the source of truth. These aliases only add
     * shared semantics for values that are composed across several LWCs. */
    /* The LWR branding output references this root font hook without emitting
     * it. Bridge it to the Builder-managed HTML font so nested Flow components
     * receive the configured family as well. */
    --dxp-g-root-font-family:
        var(--dxp-s-html-font-family, Inter), ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        Helvetica, Arial, sans-serif;
    --cms-header-height: 5.375rem;
    --cms-color-surface: var(--dxp-g-root, #ffffff);
    --cms-color-surface-soft: var(--dxp-g-root-1, #fff5f8);
    --cms-color-surface-warm: var(--dxp-g-root-2, #fffaf7);
    --cms-color-surface-selected: var(--dxp-g-root-3, #fbe9ef);
    --cms-color-text: var(--dxp-s-body-text-color, #241c21);
    --cms-color-text-strong: var(--dxp-g-root-contrast, #29252a);
    --cms-color-text-muted: var(--dxp-g-neutral-3, #675d63);
    --cms-color-text-muted-alternate: var(--dxp-s-body-small-text-color, #6c6267);
    --cms-color-caption: var(--dxp-g-neutral-2, #7c7277);
    --cms-color-heading: var(--dxp-s-text-heading-large-color, #4b112a);
    --cms-color-card-heading: var(--dxp-s-text-heading-medium-color, #651737);
    --cms-color-primary: var(--dxp-g-brand, #651737);
    --cms-color-primary-accent: var(--dxp-g-brand-1, #ad2f62);
    --cms-color-overlay: var(--dxp-g-brand-2, #310719);
    --cms-color-primary-strong: var(--dxp-g-brand-3, #391022);
    --cms-color-on-primary: var(--dxp-g-brand-contrast, #ffffff);
    --cms-color-on-primary-accent: var(--dxp-g-brand-contrast-1, #ffd6e2);
    --cms-color-on-primary-muted: var(--dxp-g-brand-contrast-2, #f1cad6);
    --cms-color-on-primary-script: var(--dxp-g-brand-contrast-3, #f4c7d5);
    --cms-color-link: var(--dxp-s-link-text-color, #821c47);
    --cms-color-link-hover: var(--dxp-s-link-text-color-hover, #7f1f46);
    --cms-color-border: var(--dxp-g-neutral, #eadde2);
    --cms-color-border-strong: var(--dxp-g-neutral-1, #d8d2d5);
    --cms-color-error: var(--dxp-g-destructive, #7f1f46);
    --cms-color-focus: var(--dxp-s-button-border-color-focus, #e6a7ba);
    --cms-color-selection: var(--dxp-s-form-checkbox-color-background, #f8d3d8);
    --cms-color-shadow: var(--dxp-g-root-contrast-1, #401126);
    --cms-color-shadow-strong: var(--dxp-g-root-contrast-2, #2d091a);
    --cms-color-shadow-soft: var(--dxp-g-root-contrast-3, #300f1d);
    --cms-content-max-width: var(--dxp-s-section-columns-max-width, 73.75rem);
    --cms-content-padding-inline: var(--dxp-s-section-content-spacing-inline-start, 1.5rem);
    --cms-section-padding-block: var(--dxp-s-section-content-spacing-block-start, 6.875rem);
    --cms-radius-button: var(--dxp-s-button-radius-border, 999px);
    --cms-radius-card: 1.5rem;
    --cms-radius-feature: 2.125rem;
    --cms-shadow-card: 0 0.75rem 2.125rem color-mix(in srgb, var(--cms-color-shadow) 7%, transparent);
    --cms-shadow-feature: 0 1.125rem 2.8125rem color-mix(in srgb, var(--cms-color-shadow) 12%, transparent);
    --cms-font-family-body: var(
        --dxp-s-body-font-family,
        var(--dxp-s-html-font-family, Inter, ui-sans-serif, sans-serif)
    );
    --cms-font-family-heading: var(--dxp-s-text-heading-large-font-family, var(--cms-font-family-body));
    --cms-font-family-display: var(--dxp-s-text-heading-extra-large-font-family, var(--cms-font-family-heading));
    --cms-font-family-decorative: Georgia, 'Times New Roman', serif;
    --cms-font-family-script: 'Segoe Print', 'Bradley Hand', cursive;
}

html,
body {
    height: 100%;
}

html {
    background: var(--cms-color-surface);
    scroll-behavior: smooth;
    scroll-padding-top: 6.875rem;
}

body {
    background: var(--cms-color-surface);
    color: var(--cms-color-text);
    font-family: var(--cms-font-family-body);
    line-height: 1.6;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

@media (max-width: 51.25rem) {
    :root {
        --cms-header-height: 4.375rem;
        --cms-content-padding-inline: 1rem;
        --cms-section-padding-block: 5.125rem;
    }
}

@media (max-width: 35rem) {
    :root {
        --cms-content-padding-inline: var(--dxp-s-section-content-spacing-inline-start-mobile, 0.75rem);
        --cms-section-padding-block: var(--dxp-s-section-content-spacing-block-start-mobile, 4.25rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}