/* ==========================================================================
   WHCC Brand — Complete Token + Font Bundle
   Single file for all WHCC-specific tokens, fonts, and component decisions.
   Pair with auth.css for the full auth page styling.
   ========================================================================== */

/* ==========================================================================
   Option Tokens (primitives)
   Source: @whcc/house-design-tokens dist/css/option-tokens-light.css
   ========================================================================== */

:root,
[data-mode="light"] {
  --hd-color-foundation-static-white: #FFFFFF;
  --hd-color-foundation-static-black: #000000;
  --hd-color-foundation-static-transparent: rgba(255, 255, 255, 0);
  --hd-color-foundation-utility-white: #FFFFFF;
  --hd-color-foundation-utility-black: #000000;
  --hd-color-foundation-gray-0: #FFFFFF;
  --hd-color-foundation-gray-1: #FBFBFB;
  --hd-color-foundation-gray-2: #F5F5F5;
  --hd-color-foundation-gray-3: #F0F0F0;
  --hd-color-foundation-gray-4: #E8E8E8;
  --hd-color-foundation-gray-5: #DDDDDD;
  --hd-color-foundation-gray-6: #D1D1D1;
  --hd-color-foundation-gray-7: #BBBBBB;
  --hd-color-foundation-gray-8: #A6A6A6;
  --hd-color-foundation-gray-9: #777777;
  --hd-color-foundation-gray-10: #686868;
  --hd-color-foundation-gray-11: #4B4B4B;
  --hd-color-foundation-gray-12: #222222;
  --hd-color-foundation-grayAlpha-1: rgba(55, 55, 55, 0.019999999552965164);
  --hd-color-foundation-grayAlpha-2: rgba(5, 5, 5, 0.03999999910593033);
  --hd-color-foundation-grayAlpha-3: rgba(5, 5, 5, 0.05999999865889549);
  --hd-color-foundation-grayAlpha-4: rgba(25, 25, 25, 0.10000000149011612);
  --hd-color-foundation-grayAlpha-5: rgba(12, 12, 12, 0.14000000059604645);
  --hd-color-foundation-grayAlpha-6: rgba(13, 13, 13, 0.1899999976158142);
  --hd-color-foundation-grayAlpha-7: rgba(3, 3, 3, 0.27000001072883606);
  --hd-color-foundation-grayAlpha-8: rgba(1, 1, 1, 0.3499999940395355);
  --hd-color-foundation-grayAlpha-9: rgba(3, 3, 3, 0.5400000214576721);
  --hd-color-foundation-grayAlpha-10: rgba(3, 3, 3, 0.6000000238418579);
  --hd-color-foundation-grayAlpha-11: rgba(1, 1, 1, 0.7099999785423279);
  --hd-color-foundation-grayAlpha-12: rgba(1, 1, 1, 0.8700000047683716);
  --hd-color-foundation-red-1: #FFFAF9;
  --hd-color-foundation-red-2: #FFF3F1;
  --hd-color-foundation-red-3: #FFECE9;
  --hd-color-foundation-red-4: #FFE2DD;
  --hd-color-foundation-red-5: #FFD3CC;
  --hd-color-foundation-red-6: #FFC4BA;
  --hd-color-foundation-red-7: #FCA598;
  --hd-color-foundation-red-8: #F78677;
  --hd-color-foundation-red-9: #E42C23;
  --hd-color-foundation-red-10: #B70105;
  --hd-color-foundation-red-11: #9C0004;
  --hd-color-foundation-red-12: #540001;
  --hd-color-foundation-orange-1: #FFFAF6;
  --hd-color-foundation-orange-2: #FFF4E8;
  --hd-color-foundation-orange-3: #FFEDDC;
  --hd-color-foundation-orange-4: #FFE4C8;
  --hd-color-foundation-orange-5: #FFD5AC;
  --hd-color-foundation-orange-6: #FFC78E;
  --hd-color-foundation-orange-7: #FFA851;
  --hd-color-foundation-orange-8: #FF8409;
  --hd-color-foundation-orange-9: #E27100;
  --hd-color-foundation-orange-10: #BA5D00;
  --hd-color-foundation-orange-11: #854300;
  --hd-color-foundation-orange-12: #361B00;
  --hd-color-foundation-green-1: #F9FBFA;
  --hd-color-foundation-green-2: #F2F7F4;
  --hd-color-foundation-green-3: #EAF2EE;
  --hd-color-foundation-green-4: #DFEBE5;
  --hd-color-foundation-green-5: #CFE1D8;
  --hd-color-foundation-green-6: #BFD7CC;
  --hd-color-foundation-green-7: #9FC4B3;
  --hd-color-foundation-green-8: #7FB09B;
  --hd-color-foundation-green-9: #308566;
  --hd-color-foundation-green-10: #077756;
  --hd-color-foundation-green-11: #03563E;
  --hd-color-foundation-green-12: #01271A;
  --hd-color-foundation-blue-1: #F9FCFE;
  --hd-color-foundation-blue-2: #F0F6FC;
  --hd-color-foundation-blue-3: #E8F1FA;
  --hd-color-foundation-blue-4: #DCEAF7;
  --hd-color-foundation-blue-5: #C9E0F3;
  --hd-color-foundation-blue-6: #B7D5EF;
  --hd-color-foundation-blue-7: #93C1E8;
  --hd-color-foundation-blue-8: #6FACE0;
  --hd-color-foundation-blue-9: #2A7AC0;
  --hd-color-foundation-blue-10: #256BA9;
  --hd-color-foundation-blue-11: #1B4E7A;
  --hd-color-foundation-blue-12: #0C2337;
  --hd-color-whcc-gray-0: #FFFFFF;
  --hd-color-whcc-gray-1: #FBFBFB;
  --hd-color-whcc-gray-2: #F5F6F6;
  --hd-color-whcc-gray-3: #EFF0F1;
  --hd-color-whcc-gray-4: #E8E8EA;
  --hd-color-whcc-gray-5: #DBDDDE;
  --hd-color-whcc-gray-6: #D0D2D4;
  --hd-color-whcc-gray-7: #B9BBBF;
  --hd-color-whcc-gray-8: #A2A6AB;
  --hd-color-whcc-gray-9: #73787E;
  --hd-color-whcc-gray-10: #65696E;
  --hd-color-whcc-gray-11: #494B50;
  --hd-color-whcc-gray-12: #202123;
  --hd-color-whcc-grayAlpha-1: rgba(55, 55, 55, 0.019999999552965164);
  --hd-color-whcc-grayAlpha-2: rgba(5, 30, 30, 0.03999999910593033);
  --hd-color-whcc-grayAlpha-3: rgba(26, 41, 55, 0.07000000029802322);
  --hd-color-whcc-grayAlpha-4: rgba(25, 25, 45, 0.10000000149011612);
  --hd-color-whcc-grayAlpha-5: rgba(15, 28, 35, 0.15000000596046448);
  --hd-color-whcc-grayAlpha-6: rgba(8, 18, 29, 0.1899999976158142);
  --hd-color-whcc-grayAlpha-7: rgba(5, 12, 26, 0.2800000011920929);
  --hd-color-whcc-grayAlpha-8: rgba(4, 14, 28, 0.3700000047683716);
  --hd-color-whcc-grayAlpha-9: rgba(0, 10, 20, 0.550000011920929);
  --hd-color-whcc-grayAlpha-10: rgba(3, 9, 17, 0.6100000143051147);
  --hd-color-whcc-grayAlpha-11: rgba(2, 5, 12, 0.7200000286102295);
  --hd-color-whcc-grayAlpha-12: rgba(2, 3, 5, 0.8799999952316284);
  --hd-color-whcc-blue-1: #F8FBFF;
  --hd-color-whcc-blue-2: #F1F6FE;
  --hd-color-whcc-blue-3: #E8F1FD;
  --hd-color-whcc-blue-4: #DCE9FD;
  --hd-color-whcc-blue-5: #CADFFC;
  --hd-color-whcc-blue-6: #B8D3FA;
  --hd-color-whcc-blue-7: #95BEF8;
  --hd-color-whcc-blue-8: #71A8F6;
  --hd-color-whcc-blue-9: #0E5FD3;
  --hd-color-whcc-blue-10: #0C54BC;
  --hd-color-whcc-blue-11: #0B479F;
  --hd-color-whcc-blue-12: #073370;
  --hd-font-family-whcc-beatrice: Beatrice;
  --hd-font-family-whcc-untitledSans: Untitled Sans;
  --hd-dimension-0: 0px;
  --hd-dimension-2: 2px;
  --hd-dimension-4: 4px;
  --hd-dimension-6: 6px;
  --hd-dimension-8: 8px;
  --hd-dimension-10: 10px;
  --hd-dimension-12: 12px;
  --hd-dimension-14: 14px;
  --hd-dimension-16: 16px;
  --hd-dimension-20: 20px;
  --hd-dimension-24: 24px;
  --hd-dimension-28: 28px;
  --hd-dimension-32: 32px;
  --hd-dimension-36: 36px;
  --hd-dimension-40: 40px;
  --hd-dimension-44: 44px;
  --hd-dimension-48: 48px;
  --hd-dimension-56: 56px;
  --hd-dimension-64: 64px;
  --hd-dimension-80: 80px;
  --hd-dimension-96: 96px;
  --hd-dimension-112: 112px;
  --hd-dimension-128: 128px;
  --hd-dimension-144: 144px;
  --hd-dimension-160: 160px;
  --hd-dimension-176: 176px;
  --hd-dimension-192: 192px;
  --hd-dimension-208: 208px;
  --hd-dimension-224: 224px;
  --hd-dimension-240: 240px;
  --hd-dimension-256: 256px;
  --hd-dimension-288: 288px;
  --hd-dimension-320: 320px;
  --hd-dimension-384: 384px;
  --hd-dimension-448: 448px;
  --hd-dimension-512: 512px;
  --hd-dimension-576: 576px;
  --hd-dimension-640: 640px;
  --hd-dimension-768: 768px;
  --hd-dimension-896: 896px;
  --hd-dimension-1024: 1024px;
  --hd-dimension-1152: 1152px;
  --hd-dimension-1280: 1280px;
  --hd-dimension-1440: 1440px;
  --hd-dimension-1600: 1600px;
  --hd-dimension-1760: 1760px;
  --hd-dimension-1920: 1920px;
  --hd-radius-0: 0px;
  --hd-radius-2: 2px;
  --hd-radius-4: 4px;
  --hd-radius-6: 6px;
  --hd-radius-8: 8px;
  --hd-radius-10: 10px;
  --hd-radius-12: 12px;
  --hd-radius-14: 14px;
  --hd-radius-16: 16px;
  --hd-radius-full: 1000;
  --hd-fontSize-11: 11px;
  --hd-fontSize-12: 12px;
  --hd-fontSize-14: 14px;
  --hd-fontSize-16: 16px;
  --hd-fontSize-18: 18px;
  --hd-fontSize-20: 20px;
  --hd-fontSize-22: 22px;
  --hd-fontSize-25: 25px;
  --hd-fontSize-28: 28px;
  --hd-fontSize-32: 32px;
  --hd-fontSize-36: 36px;
  --hd-fontSize-42: 42px;
  --hd-fontSize-46: 46px;
  --hd-fontSize-52: 52px;
  --hd-fontSize-58: 58px;
  --hd-fontSize-64: 64px;
  --hd-fontSize-74: 74px;
  --hd-fontSize-84: 84px;
}

/* ==========================================================================
   WHCC Decision Tokens (semantic aliases)
   Source: @whcc/house-design-tokens dist/css/whcc-light.css
   ========================================================================== */

[data-brand="whcc"][data-mode="light"] {
  --hd-bgColor-neutral-primary: var(--hd-color-whcc-gray-0);
  --hd-bgColor-neutral-primary-hover: var(--hd-color-whcc-gray-2);
  --hd-bgColor-neutral-primary-active: var(--hd-color-whcc-gray-3);
  --hd-bgColor-neutral-secondary: var(--hd-color-whcc-gray-2);
  --hd-bgColor-neutral-secondary-hover: var(--hd-color-whcc-gray-4);
  --hd-bgColor-neutral-secondary-active: var(--hd-color-whcc-gray-5);
  --hd-bgColor-neutral-tertiary: var(--hd-color-whcc-gray-3);
  --hd-bgColor-neutral-tertiary-hover: var(--hd-color-whcc-gray-4);
  --hd-bgColor-neutral-tertiary-active: var(--hd-color-whcc-gray-5);
  --hd-bgColor-neutral-inverse: var(--hd-color-whcc-gray-12);
  --hd-bgColor-neutral-inverse-hover: var(--hd-color-whcc-gray-10);
  --hd-bgColor-neutral-inverse-active: var(--hd-color-whcc-gray-11);
  --hd-bgColor-neutral-productPreview: var(--hd-color-whcc-grayAlpha-2);
  --hd-bgColor-neutral-disabled: var(--hd-color-whcc-grayAlpha-3);
  --hd-bgColor-selected-strong: var(--hd-color-whcc-blue-9);
  --hd-bgColor-selected-strong-hover: var(--hd-color-whcc-blue-11);
  --hd-bgColor-selected-subtle: var(--hd-color-whcc-blue-3);
  --hd-bgColor-brand-strong: var(--hd-color-whcc-blue-9);
  --hd-bgColor-brand-strong-hover: var(--hd-color-whcc-blue-10);
  --hd-bgColor-brand-strong-active: var(--hd-color-whcc-blue-11);
  --hd-bgColor-brand-subtle: var(--hd-color-whcc-blue-3);
  --hd-bgColor-brand-subtle-hover: var(--hd-color-whcc-blue-4);
  --hd-bgColor-brand-subtle-active: var(--hd-color-whcc-blue-5);
  --hd-bgColor-info-strong: var(--hd-color-whcc-blue-9);
  --hd-bgColor-info-strong-hover: var(--hd-color-whcc-blue-10);
  --hd-bgColor-info-strong-active: var(--hd-color-whcc-blue-11);
  --hd-bgColor-info-subtle: var(--hd-color-whcc-blue-3);
  --hd-bgColor-info-subtle-hover: var(--hd-color-whcc-blue-4);
  --hd-bgColor-info-subtle-active: var(--hd-color-whcc-blue-5);
  --hd-bgColor-positive-strong: var(--hd-color-foundation-green-9);
  --hd-bgColor-positive-strong-hover: var(--hd-color-foundation-green-10);
  --hd-bgColor-positive-strong-active: var(--hd-color-foundation-green-11);
  --hd-bgColor-positive-subtle: var(--hd-color-foundation-green-3);
  --hd-bgColor-positive-subtle-hover: var(--hd-color-foundation-green-4);
  --hd-bgColor-positive-subtle-active: var(--hd-color-foundation-green-5);
  --hd-bgColor-warning-strong: var(--hd-color-foundation-orange-9);
  --hd-bgColor-warning-strong-hover: var(--hd-color-foundation-orange-10);
  --hd-bgColor-warning-strong-active: var(--hd-color-foundation-orange-11);
  --hd-bgColor-warning-subtle: var(--hd-color-foundation-orange-3);
  --hd-bgColor-warning-subtle-hover: var(--hd-color-foundation-orange-4);
  --hd-bgColor-warning-subtle-active: var(--hd-color-foundation-orange-5);
  --hd-bgColor-negative-strong: var(--hd-color-foundation-red-9);
  --hd-bgColor-negative-strong-hover: var(--hd-color-foundation-red-10);
  --hd-bgColor-negative-strong-active: var(--hd-color-foundation-red-11);
  --hd-bgColor-negative-subtle: var(--hd-color-foundation-red-3);
  --hd-bgColor-negative-subtle-hover: var(--hd-color-foundation-red-4);
  --hd-bgColor-negative-subtle-active: var(--hd-color-foundation-red-5);
  --hd-fgColor-neutral-primary: var(--hd-color-whcc-gray-12);
  --hd-fgColor-neutral-secondary: var(--hd-color-whcc-gray-10);
  --hd-fgColor-neutral-inverse: var(--hd-color-whcc-gray-0);
  --hd-fgColor-neutral-disabled: var(--hd-color-whcc-grayAlpha-6);
  --hd-fgColor-neutral-onDisabled: var(--hd-color-whcc-grayAlpha-6);
  --hd-fgColor-brand-primary: var(--hd-color-whcc-blue-9);
  --hd-fgColor-brand-onSubtle: var(--hd-color-whcc-blue-11);
  --hd-fgColor-brand-onStrong: var(--hd-color-foundation-static-white);
  --hd-fgColor-info-primary: var(--hd-color-whcc-blue-10);
  --hd-fgColor-info-onStrong: var(--hd-color-foundation-static-white);
  --hd-fgColor-info-onSubtle: var(--hd-color-whcc-blue-11);
  --hd-fgColor-positive-primary: var(--hd-color-foundation-green-10);
  --hd-fgColor-positive-onStrong: var(--hd-color-foundation-static-white);
  --hd-fgColor-positive-onSubtle: var(--hd-color-foundation-green-11);
  --hd-fgColor-warning-primary: var(--hd-color-foundation-orange-10);
  --hd-fgColor-warning-onStrong: var(--hd-color-foundation-static-white);
  --hd-fgColor-warning-onSubtle: var(--hd-color-foundation-orange-11);
  --hd-fgColor-negative-primary: var(--hd-color-foundation-red-10);
  --hd-fgColor-negative-onStrong: var(--hd-color-foundation-static-white);
  --hd-fgColor-negative-onSubtle: var(--hd-color-foundation-red-11);
  --hd-borderColor-selected: var(--hd-color-whcc-blue-9);
  --hd-borderColor-neutral-subtle: var(--hd-color-whcc-grayAlpha-4);
  --hd-borderColor-neutral-disabled: var(--hd-color-whcc-grayAlpha-3);
  --hd-borderColor-brand-strong: var(--hd-color-whcc-blue-9);
  --hd-borderColor-brand-subtle: var(--hd-color-whcc-blue-7);
  --hd-borderColor-info-subtle: var(--hd-color-whcc-blue-7);
  --hd-borderColor-positive-subtle: var(--hd-color-foundation-green-7);
  --hd-borderColor-warning-subtle: var(--hd-color-foundation-orange-7);
  --hd-borderColor-negative-strong: var(--hd-color-foundation-red-9);
  --hd-borderColor-negative-subtle: var(--hd-color-foundation-red-7);
  --hd-type-fontFamily-heading: var(--hd-font-family-whcc-beatrice);
  --hd-type-fontFamily-subheading: var(--hd-font-family-whcc-beatrice);
  --hd-type-fontFamily-body: var(--hd-font-family-whcc-untitledSans);
  --hd-type-fontFamily-label: var(--hd-font-family-whcc-untitledSans);
  --hd-type-fontWeight-heading: Medium;
  --hd-type-fontWeight-subheading: Medium;
  --hd-type-fontWeight-body: Regular;
  --hd-type-fontWeight-body-medium: Medium;
  --hd-type-fontWeight-body-strong: Medium;
  --hd-type-fontWeight-label: Medium;
  --hd-type-letterSpacing-uppercase: 1;
  --hd-borderRadius-xs: var(--hd-radius-4);
  --hd-borderRadius-sm: var(--hd-radius-6);
  --hd-borderRadius-md: var(--hd-radius-8);
  --hd-borderRadius-lg: var(--hd-radius-12);
  --hd-borderRadius-xl: var(--hd-radius-16);
}

/* ==========================================================================
   @font-face Declarations
   Source: commerce-web-platform/api/assets/fonts/
   ========================================================================== */

@font-face {
  font-family: 'Beatrice';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://commerce-assets.whcc.com/fonts/Beatrice/Beatrice-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Beatrice';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://commerce-assets.whcc.com/fonts/Beatrice/Beatrice-Medium.woff') format('woff');
}

@font-face {
  font-family: 'Untitled Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://commerce-assets.whcc.com/fonts/UntitledSans/UntitledSans-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Untitled Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://commerce-assets.whcc.com/fonts/UntitledSans/UntitledSans-Medium.woff') format('woff');
}

/* ==========================================================================
   Font Family Aliases & Component Tokens
   Source: commerce-web-platform brand token SCSS files
   ========================================================================== */

:root {
  --hd-fontFamily-beatrice: 'Beatrice', ui-sans-serif, system-ui, sans-serif;
  --hd-fontFamily-untitledSans: 'Untitled Sans', ui-sans-serif, system-ui, sans-serif;
}

[data-brand='whcc'] {
  --hd-fontFamily-heading: var(--hd-fontFamily-beatrice);
  --hd-fontFamily-body: var(--hd-fontFamily-untitledSans);
  --hd-fontWeight-heading: 500;
  --hd-fontWeight-body: 400;
  --hd-fontWeight-body-strong: 500;
  --hd-letterSpacing-uppercase: 1px;

  /* Button tokens */
  --hd-button-brand-primary-fgColor: var(--hd-fgColor-brand-onStrong);
  --hd-button-brand-primary-bgColor: var(--hd-bgColor-brand-strong);
  --hd-button-brand-primary-bgColor-hover: var(--hd-bgColor-brand-strong-hover);
  --hd-button-brand-primary-bgColor-active: var(--hd-bgColor-brand-strong-active);
  --hd-button-neutral-secondary-fgColor: var(--hd-color-whcc-gray-12);
  --hd-button-neutral-secondary-bgColor: transparent;
  --hd-button-neutral-secondary-bgColor-hover: var(--hd-color-whcc-grayAlpha-3);
  --hd-button-neutral-secondary-bgColor-active: var(--hd-color-whcc-grayAlpha-5);
  --hd-button-neutral-secondary-borderColor: var(--hd-color-whcc-grayAlpha-6);
  --hd-button-fontFamily: var(--hd-fontFamily-beatrice);
  --hd-button-fontWeight: 500;
  --hd-button-letterSpacing: 0;
  --hd-button-textTransform: none;
  --hd-button-borderRadius: var(--hd-radius-4);

  /* Form tokens */
  --hd-label-fontFamily: var(--hd-fontFamily-body);
  --hd-label-fontWeight: 500;
  --hd-input-fontFamily: var(--hd-fontFamily-body);
  --hd-input-borderColor: var(--hd-color-foundation-grayAlpha-8);
  --hd-input-borderRadius: var(--hd-radius-4);
}