:root {
    /* ==================================================================== */
    /* RAW PALETTE – BRAND HUES                                             */
    /* ==================================================================== */

    /* YELLOW (brand) */
    --hds-color-yellow-50: #fef8e6;
    --hds-color-yellow-100: #fef5d7;
    --hds-color-yellow-150: #fae7aa;
    --hds-color-yellow-500: #feb900;

    /* BLUE (brand + UI) */
    --hds-color-blue-100: #e7edf9;
    --hds-color-blue-300: #aec9e6;
    --hds-color-blue-500: #036;
    --hds-color-blue-700: #111f39;
    --hds-color-blue-soft: #dbe4f5; /* legacy soft hover */
    --hds-color-blue-hover: #002a55;
    --hds-color-blue-active: #002142;
    --hds-color-blue-active-strong: #00152b;

    /* PURPLE (supporting / highlights) */
    --hds-color-purple-100: #dad5eb;
    --hds-color-purple-250: #ab98c9;
    --hds-color-purple-300: #907bb7;
    --hds-color-purple-500: #917bb7;

    /* GREEN (success) */
    --hds-color-green-50: #eff9f2;
    --hds-color-green-100: #e0f2e6;
    --hds-color-green-150: #d6d9c7;
    --hds-color-green-500: #768f59;
    --hds-color-green-strong: #007a33;
    --hds-color-green-hover: #3a8a35;
    --hds-color-green-active: #2f6f2b;
    --hds-color-green-active-strong: #255421;

    /* RED (error) */
    --hds-color-red-50: #fff0f0;
    --hds-color-red-100: #ffe0e0;
    --hds-color-red-500: #ed0500;
    --hds-color-red-hover: #c20400;
    --hds-color-red-active: #a30400;
    --hds-color-red-active-strong: #8a0300;

    /* PEACH (error background) */
    --hds-color-peach-50: #fcf3f2;
    --hds-color-peach-300: #f5dad8;

    /* BROWN (decorative / backgrounds) */
    --hds-color-brown-50: #f0e9e2;
    --hds-color-brown-300: #cfb9a0;

    /* TEAL / BLUE-GREY */
    --hds-color-teal-300: #b4c5cc;

    /* NEUTRALS */
    --hds-color-gray-0: #ffffff;
    --hds-color-gray-0-10: #ffffff1a;
    --hds-color-gray-0-20: #ffffff33;
    --hds-color-gray-100: #f2f2f2;
    --hds-color-gray-200: #c7ced5;
    --hds-color-gray-300: #e6e6e5;
    --hds-color-gray-500: #706e6b;
    --hds-color-gray-600: #6f6f6f;
    --hds-color-gray-700: #4f4f4f;
    --hds-color-gray-900: #000000;
    --hds-color-black: #0c0800;

    /* Derived neutrals */
    --hds-color-gray-0-90: #ffffffe6; /* 90% white overlay */
    --hds-color-black-10: #0000001a; /* 10% black scrim/border */
    --hds-color-gray-muted: #ABBCCD; /* placeholders, muted text */

    /* Yellow interaction states */
    --hds-color-yellow-active: #fec733;
    --hds-color-yellow-active-border: #fec01a;


    /* ==================================================================== */
    /* SEMANTIC COLOR ROLES                                                 */
    /* ==================================================================== */

    /* Brand roles */
    --hds-color-brand-primary: var(--hds-color-yellow-500); /* hero yellow */
    --hds-color-brand-primary-soft: var(--hds-color-yellow-150); /* CTA / badge fill */
    --hds-color-brand-primary-softest: var(--hds-color-yellow-50); /* very soft backgrounds */

    --hds-color-brand-accent: var(--hds-color-blue-500); /* primary blue accent */
    --hds-color-brand-accent-soft: var(--hds-color-blue-100);

    --hds-color-brand-supporting-1: var(--hds-color-purple-300);
    --hds-color-brand-supporting-2: var(--hds-color-green-500);

    /* Surfaces */
    --hds-color-surface-default: var(--hds-color-gray-0); /* page bg */
    --hds-color-surface-subtle: var(--hds-color-gray-300); /* subtle panels / dividers */
    --hds-color-surface-tinted-blue: var(--hds-color-blue-100); /* blue-tinted cards */
    --hds-color-surface-tinted-yellow: var(--hds-color-yellow-50); /* yellow-tinted blocks */
    --hds-color-surface-inverse: var(--hds-color-blue-700); /* dark header/footer */
    --hds-color-surface-overlay: var(--hds-color-gray-0-90); /* modal overlay */

    /* Text roles */
    --hds-color-text-primary: var(--hds-color-blue-500); /* main body + headings */
    --hds-color-text-heading: var(--hds-color-blue-500);
    --hds-color-text-weak: var(--hds-color-teal-300); /* secondary labels, metadata */
    --hds-color-text-muted: var(--hds-color-gray-muted); /* placeholders, disabled */
    --hds-color-text-secondary: var(--hds-color-gray-500); /* secondary paragraphs */
    --hds-color-text-disabled: var(--hds-color-gray-600);
    --hds-color-text-disabled-strong: var(--hds-color-gray-700);

    --hds-color-text-on-surface: var(--hds-color-blue-500);
    --hds-color-text-on-brand: var(--hds-color-blue-500); /* text on yellow */
    --hds-color-text-on-brand-strong: var(--hds-color-blue-700);
    --hds-color-text-on-inverse: var(--hds-color-gray-0); /* text on dark */

    --hds-color-link: var(--hds-color-blue-500);

    /* Fallback for engines without color-mix support */
    --hds-color-link-hover: var(--hds-color-blue-700);
    /* Softened on hover for modern engines */
    --hds-color-link-hover: color-mix(
            in oklab,
            var(--hds-color-blue-500) 75%,
            transparent
    );

    /* Borders & dividers */
    --hds-color-border-subtle: var(--hds-color-black-10);
    --hds-color-border-strong: var(--hds-color-blue-500);
    --hds-color-border-input: var(--hds-color-gray-300);
    --hds-color-border-input-focus: var(--hds-color-blue-500);
    --hds-color-border-input-error: var(--hds-color-red-500);
    
    /* Status / feedback */
    --hds-color-status-success: var(--hds-color-green-strong);
    --hds-color-status-success-soft: var(--hds-color-green-50);
    --hds-color-status-success-soft-strong: var(--hds-color-green-100);

    --hds-color-status-error: var(--hds-color-red-500);
    --hds-color-status-error-soft: var(--hds-color-red-50);
    --hds-color-status-error-soft-strong: var(--hds-color-red-100);

    --hds-color-status-warning: var(--hds-color-yellow-500);
    --hds-color-status-warning-soft: var(--hds-color-yellow-100);

    --hds-color-status-info: var(--hds-color-blue-500);
    --hds-color-status-info-soft: var(--hds-color-blue-300);

    /* Backdrop / scrim */
    --hds-color-backdrop: var(--hds-color-black-10);

    /* Disabled surfaces */
    --hds-color-surface-disabled: var(--hds-color-gray-100);

    /* Button state tokens */
    --hds-color-button-primary-bg: var(--hds-color-yellow-500);
    --hds-color-button-primary-bg-active: var(--hds-color-yellow-active);
    --hds-color-button-primary-border-active: var(--hds-color-yellow-active-border);

    --hds-color-button-blue-bg: var(--hds-color-blue-500);
    --hds-color-button-blue-bg-hover: var(--hds-color-blue-hover);
    --hds-color-button-blue-bg-active: var(--hds-color-blue-active);
    --hds-color-button-blue-bg-active-strong: var(--hds-color-blue-active-strong);

    --hds-color-button-red-bg: var(--hds-color-red-500);
    --hds-color-button-red-bg-hover: var(--hds-color-red-hover);
    --hds-color-button-red-bg-active: var(--hds-color-red-active);
    --hds-color-button-red-bg-active-strong: var(--hds-color-red-active-strong);

    --hds-color-button-green-bg: var(--hds-color-green-strong);
    --hds-color-button-green-bg-hover: var(--hds-color-green-hover);
    --hds-color-button-green-bg-active: var(--hds-color-green-active);
    --hds-color-button-green-bg-active-strong: var(--hds-color-green-active-strong);


    /* ==================================================================== */
    /* TYPOGRAPHY – RAW SCALE                                               */
    /* ==================================================================== */

    --hds-font-family-main: "Heijmans", sans-serif;
  

    --hds-font-weight-light: 300;
    --hds-font-weight-regular: 400;
    --hds-font-weight-medium: 500;
    --hds-font-weight-semibold: 600;
    --hds-font-weight-bold: 700;
    --hds-font-weight-extrabold: 800;

    /* Font sizes (px-based tokens, max = 48px) */
    --hds-font-size-7: 0.438rem; /* 7px – very small text */
    --hds-font-size-10: 0.625rem; /* 10px – micro */
    --hds-font-size-12: 0.75rem; /* 12px */
    --hds-font-size-14: 0.875rem; /* 14px */
    --hds-font-size-16: 1rem; /* 16px – body */
    --hds-font-size-18: 1.125rem; /* 18px */
    --hds-font-size-20: 1.25rem; /* 20px */
    --hds-font-size-24: 1.5rem; /* 24px */
    --hds-font-size-30: 1.875rem; /* 30px */
    --hds-font-size-36: 2.25rem; /* 36px – large heading */
    --hds-font-size-48: 3rem; /* 48px – hero title */

    /* Line heights */
    --hds-line-height-none: 1; /* no line height – compact text */
    --hds-line-height-tight: 1.1; /* large display headings */
    --hds-line-height-compact: 1.2; /* compact line height – inputs, labels */
    --hds-line-height-snug: 1.25; /* headings / labels */
    --hds-line-height-heading: 1.333; /* 24px text with 32px line-height */
    --hds-line-height-base: 1.5; /* body text */

    /* Letter spacing */
    --hds-letter-spacing-base: 0em;
    --hds-letter-spacing-wide: 0.0625rem;


    /* ==================================================================== */
    /* TYPOGRAPHY – SEMANTIC ROLES                                          */
    /* ==================================================================== */

    /* Body */
    --hds-type-body-font-family: var(--hds-font-family-main);
    --hds-type-body-font-size: var(--hds-font-size-16);
    --hds-type-body-line-height: var(--hds-line-height-base);
    --hds-type-body-font-weight: var(--hds-font-weight-regular);
    --hds-type-body-letter-spacing: var(--hds-letter-spacing-base);

    --hds-type-body-small-font-family: var(--hds-font-family-main);
    --hds-type-body-small-font-size: var(--hds-font-size-14);
    --hds-type-body-small-line-height: var(--hds-line-height-base);
    --hds-type-body-small-font-weight: var(--hds-font-weight-regular);
    --hds-type-body-small-letter-spacing: var(--hds-letter-spacing-base);

    --hds-type-body-xs-font-family: var(--hds-font-family-main);
    --hds-type-body-xs-font-size: var(--hds-font-size-12);
    --hds-type-body-xs-line-height: var(--hds-line-height-base);
    --hds-type-body-xs-font-weight: var(--hds-font-weight-regular);
    --hds-type-body-xs-letter-spacing: var(--hds-letter-spacing-base);

    /* Section body (responsive size only) */
    --hds-type-body-section-font-family: var(--hds-font-family-main);
    --hds-type-body-section-font-size: var(--hds-font-size-16); /* 16px mobile */
    --hds-type-body-section-line-height: var(--hds-line-height-base);
    --hds-type-body-section-font-weight: var(--hds-font-weight-regular);
    --hds-type-body-section-letter-spacing: var(--hds-letter-spacing-base);

    /* Headings */
    --hds-type-heading-xs-font-family: var(--hds-font-family-main);
    --hds-type-heading-xs-font-size: var(--hds-font-size-14); /* 14px */
    --hds-type-heading-xs-line-height: var(--hds-line-height-snug);
    --hds-type-heading-xs-font-weight: var(--hds-font-weight-semibold);
    --hds-type-heading-xs-letter-spacing: var(--hds-letter-spacing-base);

    --hds-type-heading-sm-font-family: var(--hds-font-family-main);
    --hds-type-heading-sm-font-size: var(--hds-font-size-18); /* 18px */
    --hds-type-heading-sm-line-height: var(--hds-line-height-snug);
    --hds-type-heading-sm-font-weight: var(--hds-font-weight-bold);
    --hds-type-heading-sm-letter-spacing: var(--hds-letter-spacing-base);

    --hds-type-heading-md-font-family: var(--hds-font-family-main);
    --hds-type-heading-md-font-size: var(--hds-font-size-24); /* 24px */
    --hds-type-heading-md-line-height: var(--hds-line-height-snug);
    --hds-type-heading-md-font-weight: var(--hds-font-weight-bold);
    --hds-type-heading-md-letter-spacing: var(--hds-letter-spacing-base);

    --hds-type-heading-lg-font-family: var(--hds-font-family-main);
    --hds-type-heading-lg-font-size: var(--hds-font-size-36); /* 36px */
    --hds-type-heading-lg-line-height: var(--hds-line-height-tight);
    --hds-type-heading-lg-font-weight: var(--hds-font-weight-bold);
    --hds-type-heading-lg-letter-spacing: var(--hds-letter-spacing-base);

    /* Section heading (responsive size only) */
    --hds-type-heading-section-font-family: var(--hds-font-family-main);
    --hds-type-heading-section-font-size: var(--hds-font-size-24); /* 24px mobile */
    --hds-type-heading-section-line-height: var(--hds-line-height-snug);
    --hds-type-heading-section-font-weight: var(--hds-font-weight-bold);
    --hds-type-heading-section-letter-spacing: var(--hds-letter-spacing-base);

    /* Captions / micro text */
    --hds-type-caption-font-family: var(--hds-font-family-main);
    --hds-type-caption-font-size: var(--hds-font-size-12); /* 12px */
    --hds-type-caption-line-height: var(--hds-line-height-snug);
    --hds-type-caption-font-weight: var(--hds-font-weight-regular);
    --hds-type-caption-letter-spacing: var(--hds-letter-spacing-base);

    --hds-type-micro-font-family: var(--hds-font-family-main);
    --hds-type-micro-font-size: var(--hds-font-size-10); /* 10px */
    --hds-type-micro-line-height: var(--hds-line-height-snug);
    --hds-type-micro-font-weight: var(--hds-font-weight-regular);
    --hds-type-micro-letter-spacing: var(--hds-letter-spacing-base);


    /* ==================================================================== */
    /* SPACING – RAW SCALE (4px grid)                                       */
    /* ==================================================================== */

    --hds-space-0: 0;
    --hds-space-1: 0.0625rem; /* 1px – border width */
    --hds-space-2: 0.125rem; /* 2px – small spacing */
    --hds-space-3: 0.1875rem; /* 3px – legacy spacing */
    --hds-space-4: 0.25rem; /* 4px */
    --hds-space-5: 0.3125rem; /* 5px */
    --hds-space-6: 0.375rem; /* 6px – border radius */
    --hds-space-7: 0.4375rem; /* 7px – legacy gap */
    --hds-space-8: 0.5rem; /* 8px */
    --hds-space-10: 0.625rem; /* 10px – gap spacing */
    --hds-space-12: 0.75rem; /* 12px */
    --hds-space-16: 1rem; /* 16px */
    --hds-space-18: 1.125rem; /* 18px – legacy spacing */
    --hds-space-20: 1.25rem; /* 20px – large button Y padding etc. */
    --hds-space-24: 1.5rem; /* 24px */
    --hds-space-32: 2rem; /* 32px */
    --hds-space-40: 2.5rem; /* 40px */
    --hds-space-44: 2.75rem; /* 44px – padding */
    --hds-space-48: 3rem; /* 48px */
    /* Additional spacing values used in components */
    --hds-space-15: 0.9375rem; /* 15px – input padding */
    --hds-space-28: 1.75rem; /* 28px – modal padding */
    --hds-space-64: 4rem; /* 64px – large container padding */


    /* ==================================================================== */
    /* SIZES & LAYOUT                                                       */
    /* ==================================================================== */

    /* Icon glyph sizes */
    --hds-size-icon-xs: 0.75rem; /* 12px */
    --hds-size-icon-sm: 0.875rem; /* 14px */
    --hds-size-icon-md: 1.25rem; /* 20px */
    --hds-size-icon-lg: 1.5rem; /* 24px */
    --hds-size-icon-xl: 2.75rem; /* 44px */
    --hds-size-icon-header: var(--hds-size-icon-md);
    --hds-size-icon-close-w: 0.9375rem; /* 15px */
    --hds-size-icon-close-h: 1.25rem; /* 20px */
    --hds-size-logo: 3rem; /* 48px */
    --hds-size-128: 8rem; /* 128px */

    /* Minimum hit target for touch */
    --hds-size-hit-target-min: 2.75rem; /* ~44px */

    /* Layout containers */
    --hds-size-layout-container-max: 75rem; /* 1200px */
    --hds-size-layout-container-max-wide: 80.5rem; /* 1288px (legacy / wide) */


    /* ==================================================================== */
    /* RADII, SHADOWS, Z-INDEX, ANIMATION                                  */
    /* ==================================================================== */

    /* Raw radii */
    --hds-radius-xxs: 0.125rem; /* 2px */
    --hds-radius-xs: 0.25rem; /* 4px */
    --hds-radius-sm: 0.375rem; /* 6px */
    --hds-radius-md: 0.5rem; /* 8px */
    --hds-radius-lg: 1.875rem; /* 30px */
    --hds-radius-xl: 2.5rem; /* 40px */
    --hds-radius-pill: 9999px; /* fully rounded */
    /* Additional radius values used in components */
    --hds-radius-md-alt: 0.75rem; /* 12px – medium radius variant */
    --hds-radius-lg-alt: 1rem; /* 16px – large radius variant */
    --hds-radius-2xl: 3.75rem; /* 60px – very large radius */

    /* Semantic radii */
    --hds-radius-card-small: var(--hds-radius-sm); /* 6px */
    --hds-radius-card-large: var(--hds-radius-lg); /* 30px */
    --hds-radius-card-l-shape: var(--hds-radius-card-small) var(--hds-radius-card-small) var(--hds-radius-card-large) var(--hds-radius-card-small);

    --hds-radius-button: var(--hds-radius-pill);
    --hds-radius-chip: var(--hds-radius-md);

    /* Shadow */
    --hds-shadow-card-subtle: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);
    --hds-shadow-overlay: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.25);
    --hds-shadow-input-focus: 0 0 0 var(--hds-space-1) var(--hds-color-border-input-focus);
    --hds-shadow-input-error: 0 0 0 var(--hds-space-1) var(--hds-color-border-input-error);

    /* Z-index scale */
    /* lightning/toastContainer uses z-index 10000 - all site elements must stay below */
    --hds-z-index-base: 0;
    --hds-z-index-component-overlay: 99;
    --hds-z-index-header: 99;
    --hds-z-index-dropdown: 199;
    --hds-z-index-overlay: 399;
    --hds-z-index-toast: 10000; /* Platform toast  */

    /* Animation / transitions */
    --hds-duration-short: 0.15s; /* micro transitions */
    --hds-duration-medium: 0.2s; /* drawers, menus */
    --hds-duration-long: 0.5s; /* large entrance animations */

    --hds-ease-default: ease;
    --hds-ease-in: cubic-bezier(.4, 0, 1, 1);
    --hds-ease-out: cubic-bezier(0, 0, .2, 1);
    --hds-ease-in-out: cubic-bezier(.4, 0, .2, 1);

    --hds-transition-default-duration: var(--hds-duration-short);
    --hds-transition-default-timing: var(--hds-ease-in-out);

    /* Blur */
    --hds-blur-sm: 0.625rem; /* 10px – backdrop blur */
    --hds-blur-md: 1.25rem; /* 20px – backdrop blur */

    /* Opacity */
    --hds-opacity-muted: 0.33;
    --hds-opacity-disabled: 0.6;
    
    /* Container padding - horizontal (page edges, headers, footers) */
    --hds-space-container-padding-x: var(--hds-space-12);

    /* Container padding - vertical (page sections, layout containers) */
    --hds-space-container-padding-y: var(--hds-space-24);

    /* Content padding (cards, panels, modals - same as container vertical) */
    --hds-space-content-padding: var(--hds-space-24);

    /* Focus outline for interactive elements (buttons, links, etc.) */
    --hds-color-focus-outline: var(--hds-color-blue-500);
    --hds-space-focus-outline-width: var(--hds-space-2);
    --hds-space-focus-outline-offset: var(--hds-space-2);

    /* ==================================================================== */
    /* EXPERIENCE CLOUD OVERRIDES                                     */
    /* ==================================================================== */
    
    --dxp-s-link-text-color: var(--hds-color-blue-500);
    --dxp-s-link-text-color-hover: #0055aa; 
    --dxp-s-link-text-color-visited: #660099;
    --dxp-g-spacing-xxlarge: 0px;
    --dxp-g-root-font-family: var(--hds-font-family-main);
    --dxp-s-body-font-size: 18px; 
    --dxp-s-body-font-weight: 400;
    --dxp-c-link-text-color: var(--hds-color-blue-500);
    --dxp-c-section-image-overlay-color: #FFFFFF;


}

@media (min-width: 48em) {
    :root {
        /* Container padding - horizontal (desktop) */
        --hds-space-container-padding-x: var(--hds-space-44);

        /* Container padding - vertical (desktop) */
        --hds-space-container-padding-y: var(--hds-space-48);

        /* Content padding (desktop) */
        --hds-space-content-padding: var(--hds-space-48);

        /* Section heading (desktop) */
        --hds-type-heading-section-font-size: var(--hds-font-size-36); /* 36px desktop */

        /* Section body (desktop) */
        --hds-type-body-section-font-size: var(--hds-font-size-18); /* 18px desktop */
    }
}