/* ==========================================================================
   Design tokens – mirrors the reference token system 1:1
   (colour roles, 8px spacing ramp, 640/960/1280 "next" breakpoints and the
   legacy 576/992/1200/1366 grid breakpoints, 8px root font-size).
   ========================================================================== */
:root {
	/* Background */
	--colorBgDefault: #ffffff;
	--colorBgDefaultSubdued: #f3f4f6;
	--colorBgDefaultEmphasis: #141d23;
	--colorBgDefaultHover: #f6f6f7;
	--colorBgDefaultPressed: #e4e5e8;
	--colorBgDefaultMuted: #fbfbfb;
	--colorBgPrimary: #eef8ff;
	--colorBgPrimaryHover: #cfe9fe;
	--colorBgPrimaryEmphasis: #014fd3;
	--colorBgPrimaryEmphasisHover: #0072de;
	--colorBgPrimaryEmphasisPressed: #0046be;
	--colorBgSecondary: #fff6d1;
	--colorBgSecondaryHover: #fff200;
	--colorBgSecondaryPressed: #ffce00;
	--colorBgSurfaceSecondary: #ffe200;
	--colorBgSuccess: #e5fde5;
	--colorBgSuccessEmphasis: #03721e;
	--colorBgDanger: #fff4f3;
	--colorBgDangerEmphasis: #b00625;
	--colorBgAttention: #fff5ec;
	--colorBgInfo: #f6f6f7;
	--colorBgCompTrackDefault: #e4e5e8;
	--colorBgCompTrackShimmer: #f6f6f7;
	--colorBgCompSurfacePrimaryEmphasis: #014fd3;
	--colorBgCompSurfaceSecondaryEmphasis: #ffe200;
	--colorBgCompSurfaceTransparentHover: #03030308;
	--colorBgCompSurfaceTransparentPressed: #0303031a;
	--colorBgTransparentOnEmphasisHover: #ffffff1a;
	--colorBgTransparentOnEmphasisPressed: #ffffff40;

	/* Border */
	--colorBorderDefault: #c4c8cf;
	--colorBorderDefaultSubdued: #e4e5e8;
	--colorBorderDefaultEmphasis: #818994;
	--colorBorderPrimaryEmphasis: #025ccc;
	--colorBorderPrimarySelected: #014fd3;
	--colorBorderSecondary: #f4c138;
	--colorBorderCompDividerDefault: #03030333;
	--colorBorderCompDividerSubdued: #0303031a;
	--colorBorderCompDividerOnEmphasis: #ffffff4d;
	--colorBorderCompOutlineDefault: #818994;
	--colorBorderCompOutlineDefaultMuted: #c4c8cf;
	--colorBorderCompOutlinePrimaryEmphasis: #0046be;
	--colorBorderTransparentOnEmphasis: #ffffff4d;

	/* Foreground */
	--colorFgDefault: #030303;
	--colorFgDefaultMuted: #393c42;
	--colorFgDefaultSubdued: #6c6f75;
	--colorFgDefaultInverse: #fbfbfb;
	--colorFgDefaultOnEmphasis: #fbfbfb;
	--colorFgDefaultFixed: #030303;
	--colorFgPrimary: #014fd3;
	--colorFgSecondary: #914600;
	--colorFgSuccess: #03721e;
	--colorFgDanger: #b00625;
	--colorFgAttention: #983e00;
	--colorOutlineFocus: #030303;

	/* Brand */
	--colorBrandDarkBlue: #001e73;
	--colorBrandHumanBlue: #0046be;
	--colorBrandLightBlue: #2b5df5;
	--colorBrandTechBlack: #1d252c;
	--colorBrandTechWhite: #e0e6ef;
	--colorBrandTechYellow: #fff200;
	--colorBrandDarkYellow: #ffce00;
	--colorBrandPromoRed: #e81e25;
	--colorBrandLightGray: #c5cbd5;
	--colorBrandDarkGray: #55555a;
	--colorBrandEssentialsLightTeal: #00c9ba;
	--colorBrandEssentialsGradientBlue: #003caf;

	/* Legacy palette used by header / footer / forms */
	--color-unstable-pure-white: #fff;
	--color-unstable-background-white: #f0f2f4;
	--color-unstable-tech-white: #e0e6ef;
	--color-unstable-light-gray: #c5cbd5;
	--color-unstable-tech-gray: #90959e;
	--color-unstable-hint-gray: #70757d;
	--color-unstable-dark-gray: #55555a;
	--color-unstable-tech-black: #1d252c;
	--color-unstable-black-text: #040c13;
	--color-unstable-success-green: #318000;
	--color-unstable-value-red: #bb0628;
	--color-unstable-promo-red: #e81e25;
	--color-unstable-tech-yellow: #fff200;
	--color-unstable-button-yellow: #ffe000;
	--color-unstable-dark-yellow: #ffce00;
	--color-unstable-highlight-blue: #f1f8ff;
	--color-unstable-light-blue: #2b5df5;
	--color-unstable-link-blue: #0457c8;
	--color-unstable-human-blue: #0046be;
	--color-unstable-dark-blue: #001e73;
	--color-fg-base: #040c13;
	--color-fg-neutral: #70757d;
	--color-border-base: #c5cbd5;

	/* Typography */
	--fontFamilySansSerif: "Human BBY Digital", "Human Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	--fontFamilyCondensed: "Human BBY Digital Condensed", "Human BBY Digital", "Human Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--family: "Human BBY Digital", "Human Fallback", Arial, Helvetica, sans-serif;

	--sizeFont1: 10px; --sizeFont2: 12px; --sizeFont3: 14px; --sizeFont4: 16px; --sizeFont5: 20px;
	--sizeFont6: 24px; --sizeFont7: 28px; --sizeFont8: 32px; --sizeFont9: 36px; --sizeFont10: 40px;
	--sizeFont11: 44px; --sizeFont12: 48px; --sizeFont13: 56px; --sizeFont14: 64px;
	--sizeLineHeight1: 12px; --sizeLineHeight2: 16px; --sizeLineHeight3: 18px; --sizeLineHeight4: 20px;
	--sizeLineHeight5: 24px; --sizeLineHeight6: 28px; --sizeLineHeight7: 32px; --sizeLineHeight8: 40px;
	--sizeLineHeight9: 44px; --sizeLineHeight10: 48px; --sizeLineHeight11: 56px; --sizeLineHeight12: 64px;

	/* Spacing ramp (px) */
	--sizeSpacing25: 2px; --sizeSpacing50: 4px; --sizeSpacing100: 8px; --sizeSpacing150: 12px;
	--sizeSpacing200: 16px; --sizeSpacing300: 24px; --sizeSpacing400: 32px; --sizeSpacing500: 40px;
	--sizeSpacing600: 48px; --sizeSpacing700: 56px; --sizeSpacing800: 64px; --sizeSpacing900: 72px;
	--sizeSpacing1000: 80px; --sizeSpacing1200: 96px; --sizeSpacing1600: 128px;

	/* Legacy rem ramp – root font-size is 8px so 1rem = 8px */
	--size-25: 0.25rem; --size-50: 0.5rem; --size-100: 1rem; --size-150: 1.5rem; --size-200: 2rem;
	--size-300: 3rem; --size-400: 4rem; --size-500: 5rem; --size-600: 6rem; --size-700: 7rem; --size-800: 8rem;
	--size-round-base: 0.5rem;
	--size-border-base: 1px;

	--sizeRadiusSm: 2px; --sizeRadiusMd: 4px; --sizeRadiusLg: 8px; --sizeRadiusXl: 16px;
	--sizeIconXs: 12px; --sizeIconSm: 16px; --sizeIconMd: 24px; --sizeIconLg: 32px; --sizeIconXl: 48px;

	/* Breakpoints (documentation only – media queries use literal values) */
	--sizeBreakpointMd: 640px; --sizeBreakpointLg: 960px; --sizeBreakpointXl: 1280px;
	--screen-unstable-sm: 576px; --screen-unstable-md: 992px; --screen-unstable-lg: 1200px; --screen-unstable-xl: 1366px;

	--grid-gutter: 1rem;
	--grid-margin: 2rem;

	/* z-index */
	--z-header: 500;
	--z-flyout: 100;
	--z-overlay: 99;
	--z-drawer: 1500;
}
@media (min-width: 992px) { :root { --grid-margin: var(--size-300); } }
@media (min-width: 1200px) { :root { --grid-margin: var(--size-600); } }
@media (min-width: 1366px) { :root { --grid-margin: var(--size-800); } }

/* Fallback face: the reference declares its brand face with a local Arial fallback
   size-adjusted to 105%. The brand webfont is proprietary and is NOT bundled; drop
   licensed .woff2 files in assets/fonts and uncomment the @font-face block in base.css. */
@font-face {
	font-family: "Human Fallback";
	src: local("Arial");
	size-adjust: 105%;
}