:root {
    /* ---------------------------------------
     Font Families
     --------------------------------------- */
    --ff-primary: "DIN", sans-serif;
    --ff-secondary: "DIN", sans-serif;

    /* Font Weights */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;
    --fw-black: 900;

    /* SITE WIDTH */
    --site-container-width: 100%;
    --site-container-width-sm: 100%;

    /* ---------------------------------------
     COLORS
    ---------------------------------------- */
    --color-oak: #64513D;
    --color-oak-dark: #30261D;  
    --color-dark-tan: #BBA58F;
    --color-tan: #D2C2B4;
    --color-light-tan: #E8E5E2;
    --color-blue-dark: #1B333A;
    --color-blue-hover: #0E1A1D;
    --color-blue-mid: #4E6B76;
    --color-blue-light: #B5C6C9;
    --color-blue-lightest: #DCE2E5;
    --color-blue-bright: #0065A1;
    --color-mid-blue: #003D61;
    --color-soft-black: #393939;
    --color-mid-soft-black: #797979;
    --color-warm-white: #F1F1F1;
    --color-white: #FFF;
    --color-black: #000;
    --color-error: #94002E;
    --color-disabled: #adadad;
    --color-error-light: #FFE1E0;
    --color-confirmation: #029072;
    --color-alert-success: #eefad8;
    --color-warning: #FBF2C8;
    --color-gray-600: #666;
    --color-alert-error: #FFD6D5;
    --color-alert-info: #D6EEFF;
    --color-alert-confirmation: #D8FFD6;
    --color-text-primary: #2D2720;
    --bg-out-of-stock: rgb(220 226 229 / 85%);
    --product-badge-bg: rgb(0 101 161 / 81%);


     /* ---------------------------------------
     Typography (Custom)
    
    /* ---------------------------------------
     border color & thickness
    --------------------------------------- */
    --section-border-color: var(--color-tan);
    --section-border-width: 1px;
    --color-border-default: var(--color-tan);
    --color-border: var(--color-border-default);

    /* ---------------------------------------
     Default Theme
    --------------------------------------- */
    --theme-bg-color: var(--color-white);
    --theme-text-color: var(--color-soft-black);
    --theme-heading-color: var(--color-blue-dark);
    --theme-sub-heading-color: var(--color-blue-dark);
    --theme-link-color: var(--color-blue-mid);
    --theme-link-hover-color: var(--color-blue-bright);
    --theme-link-disabled-color: var(--color-disabled);
    --theme-link-focus-color: var(--color-blue-light);
    --theme-arrow-bg-position: 0 0;
    --theme-arrow-disabled-position: 20% 0;
    --theme-arrow-hover-position: 40% 0;
    --theme-dots-default: var(--color-dark-tan);
    --theme-dots-active: var(--color-oak-dark);
   
      /* ---------------------------------------
      Button Themes
      --------------------------------------- */
      --btn-border-radius: 0px;
      --btn-gap: 12px;
      --btn-gap-sm: 8px;
      --btn-padding-x: 48px;
      --btn-padding-y: 12px;
      --btn-padding-y-sm: 6px;
      --btn-height: 44px;
      --btn-height-sm: 32px;
      --btn-icon-color: var(--color-oak);
      --btn-icon-hover: var(--color-white);

      
    /* primary button theme */
    --btn-primary-bg: var(--color-blue-dark);
    --btn-primary-bg-hover: var(--color-blue-hover);
    --btn-primary-txt: var(--color-white);
    --btn-primary-txt-hover: var(--color-white);
    --btn-primary-border: var(--color-blue-dark);
    --btn-primary-border-hover: var(--color-blue-light);
    --btn-primary-focus-outline: var(--color-blue-light);

    /* secondary button theme */
    --btn-secondary-bg: var(--color-white);
    --btn-secondary-bg-hover: var(--color-blue-lightest);
    --btn-secondary-txt: var(--color-blue-dark);
    --btn-secondary-txt-hover: var(--color-blue-dark);
    --btn-secondary-border: var(--color-blue-dark);
    --btn-secondary-border-hover: var(--color-blue-dark);

    /* tertiary button theme */
    --btn-tertiary-bg: linear-gradient(0deg, #4E6B76, #4E6B76), linear-gradient(0deg, rgb(0 0 0 / 20%), rgb(0 0 0 / 20%));
    --btn-tertiary-bg-hover: var(--color-blue-hover);
    --btn-tertiary-border: transparent;
    --btn-tertiary-border-hover: transparent;
    --btn-tertiary-txt: var(--color-white);
    --btn-tertiary-txt-hover: var(--color-white);
    --btn-tertiary-icon-color: var(--color-mid-blue);
    --btn-tertiary-icon-hover: var(--color-mid-blue);

    /* withIcon button theme */
    --btn-with-icon-bg: var(--color-white);
    --btn-with-icon-bg-hover: var(--color-blue-hover);
    --btn-with-icon-txt: var(--color-blue-dark);
    --btn-with-icon-txt-hover: var(--color-white);
    --btn-with-icon-border: var(--color-blue-dark);
    --btn-with-icon-border-hover: var(--color-blue-dark);
    --btn-with-icon-icon: var(--color-oak);

    /* ---------------------------------------
     Spacing
    --------------------------------------- */
   --spacing-xs: 8px;
   --spacing-sm: 16px;
   --spacing-md: 24px;
   --spacing-lg: 40px;
   --spacing-xl: 64px;
   --spacing-container: 20px;

   /* ---------------------------------------
     Icon Sizes
    --------------------------------------- */
   --icon-size-xxbig: 70px;
   --icon-size-xbig: 40px;
   --icon-size-xl: 34px;
   --icon-size-lg: 24px;
   --icon-size-md: 18px;
   --icon-size-sm: 16px;

   /* ---------------------------------------
     Breadcrumbs
    --------------------------------------- */
   --breadcrumb-height: 46px;
   --breadcrumb-padding: 12px 20px;
   --breadcrumb-gap: 12px;

   /* -----------------------------------------
      Modals
      --------------------------------------- */
    --modal-width-sm: 580px;
    --modal-width-md: 857px;

  /* ---------------------------------------
     Global Form field styles
    --------------------------------------- */
    --form-field-color: var(--color-oak);
    --form-soft-black-input: var(--color-soft-black);
    --form-field-soft-black: var(--color-soft-black);
    --form-field-mid-soft-black: var(--color-mid-soft-black);
    --form-field-text-mid-black: var(--color-mid-soft-black);
    --form-field-toggle-clr: var(--color-white);
    --form-check-box: var(--color-white);
    --form-icon-color: var(--color-oak);
    --form-field-hover: var(--color-oak);

    /* ---------------------------------------
     Typography (Custom)
     --------------------------------------- */

    /* Base */
    --body-font-size: var(--fw-regular) 14px/20px var(--ff-primary);

    /* Headings */
    --heading-font-xxl: var(--fw-bold) 34px/40px var(--ff-primary);
    --heading-font-xl: var(--fw-bold) 30px/36px var(--ff-primary);
    --heading-font-l: var(--fw-bold) 26px/32px var(--ff-primary);
    --heading-font-m: var(--fw-bold) 24px/26px var(--ff-primary);
    --heading-font-s: var(--fw-bold) 20px/24px var(--ff-primary);
    --heading-font-xs: var(--fw-bold) 18px/22px var(--ff-primary);

    /* Paragraphs */
    --para-font-lg: var(--fw-regular) 16px/22px var(--ff-primary);
    --para-font-lg-medium: var(--fw-medium) 16px/22px var(--ff-primary);
    --para-font-lg-bld: var(--fw-bold) 16px/22px var(--ff-primary);
    --para-font-md: var(--fw-regular) 14px/20px var(--ff-primary);
    --para-font-md-medium: var(--fw-medium) 14px/20px var(--ff-primary);
    --para-font-md-bld: var(--fw-bold) 14px/20px var(--ff-primary);
    --para-font-sm: var(--fw-regular) 12px/18px var(--ff-primary);
    --para-font-sm-medium: var(--fw-medium) 12px/18px var(--ff-primary);
    --para-font-sm-bld: var(--fw-bold) 12px/18px var(--ff-primary);

    /* Eyebrow */
    --eyebrow: var(--fw-regular) 12px/16px var(--ff-primary);

    /* Label */
    --label-font: var(--fw-regular) 16px/24px var(--ff-primary);
    --label-font-sm: var(--fw-bold) 15px/19px var(--ff-primary);

    /* Lists */
    --list-font: var(--fw-regular) 16px/22px var(--ff-primary);

    /* Buttons */
    --button-font: var(--fw-bold) 16px/16px var(--ff-primary);

   /* Button font tokens (exposed for components) */
   --btn-font-size: 16px;
   --btn-font-weight: var(--fw-bold);
   --btn-line-height: 16px;
   --btn-font-family: var(--ff-primary);

   /* ---------------------------------------
     PLP Grid
     --------------------------------------- */
   --grid-spacing: 12px;
   --grid-button-letter-spacing: 0.16px;


    /* Links */
    --link-font: var(--fw-bold) 16px/16px var(--ff-primary);
    --navbar-height: 81px;
    --nav-border-size: 8px;

    /* Out of Stock Spacing */
    --out-of-stock-spacing: 20px;

    /* --------------------------------------------------------------------------
     Responsive Overrides (Desktop Up)
     -------------------------------------------------------------------------- */
     @media (min-width: 992px) {
        --body-font-size: var(--fw-regular) 16px/24px var(--ff-primary);
        --heading-font-xxl: var(--fw-bold) 44px/58px var(--ff-primary);
        --heading-font-xl: var(--fw-bold) 38px/50px var(--ff-primary);
        --heading-font-l: var(--fw-bold) 32px/42px var(--ff-primary);
        --heading-font-m: var(--fw-bold) 28px/36px var(--ff-primary);
        --heading-font-s: var(--fw-bold) 24px/32px var(--ff-primary);
        --heading-font-xs: var(--fw-bold) 20px/26px var(--ff-primary);
        --para-font-lg: var(--fw-regular) 18px/24px var(--ff-primary);
        --para-font-lg-medium: var(--fw-medium) 18px/24px var(--ff-primary);
        --para-font-lg-bld: var(--fw-bold) 18px/24px var(--ff-primary);
        --para-font-md: var(--fw-regular) 16px/22px var(--ff-primary);
        --para-font-md-medium: var(--fw-medium) 16px/22px var(--ff-primary);
        --para-font-md-bld: var(--fw-bold) 16px/22px var(--ff-primary);
        --para-font-sm: var(--fw-regular) 14px/20px var(--ff-primary);
        --para-font-sm-medium: var(--fw-medium) 14px/20px var(--ff-primary);
        --para-font-sm-bld: var(--fw-bold) 14px/20px var(--ff-primary);
        --eyebrow: var(--fw-regular) 12px/16px var(--ff-primary);
        --list-font: var(--fw-regular) 18px/24px var(--ff-primary);
        --label-font: var(--fw-bold) 24px/30px var(--ff-primary);
        --label-font-sm: var(--fw-bold) 16px/20px var(--ff-primary);
        --spacing-xs: 12px;
        --spacing-sm: 24px;
        --spacing-md: 40px;
        --spacing-lg: 64px;
        --spacing-xl: 104px;
        --spacing-container: 50px;
        --site-container-width: 1440px;
        --site-container-width-sm: 1340px;
        --breadcrumb-height: 46px;
        --breadcrumb-padding: 13px 50px;
        --grid-spacing: 24px;
        --navbar-height: 148px;
        --nav-border-size: 10px;
        --out-of-stock-spacing: 31px;
     }
}


/* -------------------------------------------------------------
   MAP CUSTOM TOKENS → EDS TOKENS
   This makes all EDS typography use your brand scale.
-------------------------------------------------------------- */

html:root {
    /* Display → EDS */
    --color-brand-700: var(--color-mid-soft-black);
    --background-color: var(--color-white);

    /* Headlines → EDS */
    --type-display-1-font: var(--heading-font-xxl);
    --type-display-2-font: var(--heading-font-xl);
    --type-display-3-font: var(--heading-font-l);
    --type-headline-1-font: var(--heading-font-m);
    --type-headline-2-default-font: var(--heading-font-xs);
    --type-headline-2-strong-font: var(--heading-font-s);
    --type-display-1-letter-spacing: normal;
    --type-display-2-letter-spacing: normal;
    --type-display-3-letter-spacing: normal;
    --type-headline-1-letter-spacing: normal;
    --type-headline-2-strong-letter-spacing: normal;
    --type-headline-2-default-letter-spacing: normal;
    
    /* Body → EDS */
    --type-body-1-default-font: var(--body-font-size); /* body font */
    --type-body-1-strong-font: var(--link-font); /* links font */
    --type-body-2-default-font: var(--para-font-sm); /* code | pre tag fonts */
    --type-body-2-emphasized-font: var(--para-font-sm);
    --type-body-1-default-letter-spacing: normal;
    --type-body-2-default-letter-spacing: normal;
    --type-body-1-strong-letter-spacing: normal;
    
    /* Buttons → EDS */
    --type-button-1-font: var(--button-font);
    --type-button-2-font: var(--button-font);
    --type-button-2-letter-spacing: normal;

    /* Base family → EDS */
    --type-base-font-family: var(--ff-primary);
    --type-condensed-font-family: var(--ff-primary);

    /* colors --> EDS */
    --color-neutral-200: var(--color-light-tan);
    --color-neutral-800: var(--color-soft-black);

    /* spacing → EDS */
    --spacing-xsmall: var(--spacing-xs);
    --spacing-small: var(--spacing-sm);
    --spacing-medium: var(--spacing-md);
    --spacing-large: var(--spacing-lg);
    --spacing-xlarge: var(--spacing-xl);
    --nav-height: var(--navbar-height);
}