:root {
	/* Colors — from NBL logo. Site-wide usage ratio: black 20% / gold 40% / white 40% */
	--px-color-black: #000000;
	--px-color-white: #ffffff;
	--px-color-gold: #f5a623;
	--px-color-gold-dark: #d98c12;
	--px-color-gold-light: #fce8b8;
	--px-gradient-gold: linear-gradient( 135deg, var(--px-color-gold-dark) 0%, var(--px-color-gold) 45%, var(--px-color-gold-light) 65%, var(--px-color-gold) 100% );

	--px-color-primary: var(--px-color-black);
	--px-color-secondary: #6b6b6b;
	--px-color-accent: var(--px-color-gold);
	--px-color-bg: var(--px-color-white);
	--px-color-bg-alt: var(--px-color-gold);
	--px-color-bg-dark: var(--px-color-black);
	--px-color-border: #e5e5e5;
	--px-color-surface: #f7f5f0;

	/* Fonts — sizes use clamp() for responsive scaling: min viewport-scaled value up to a max cap.
	   Line-heights are unitless (scale automatically with the clamped font-size). */
	--px-font-heading: 'Roboto', sans-serif;
	--px-font-heading-weight: 600;
	--px-font-h1-size: clamp( 30px, 3vw + 1rem, 48px );
	--px-font-h1-line-height: 1.15;

	--px-font-body: 'Roboto', sans-serif;
	--px-font-body-weight: 400;
	--px-font-body-size: clamp( 14px, 0.8vw + 0.85rem, 16px );
	--px-font-body-line-height: 1.5;

	--px-font-subtitle: 'Roboto', sans-serif;
	--px-font-subtitle-weight: 400;
	--px-font-subtitle-size: clamp( 16px, 1.2vw + 0.85rem, 21px );
	--px-font-subtitle-line-height: 1.48;
	--px-font-subtitle-color: var(--px-color-white);

	--px-font-topbar: 'Roboto', sans-serif;
	--px-font-topbar-weight: 400;
	--px-font-topbar-size: clamp( 11px, 0.3vw + 0.6rem, 12px );
	--px-font-topbar-line-height: 1.5;
	--px-font-topbar-color: var(--px-color-white);
	--px-font-topbar-color-hover: var(--px-color-black);

	--px-font-nav: 'Roboto', sans-serif;
	--px-font-nav-weight: 700;
	--px-font-nav-size: clamp( 13px, 0.3vw + 0.7rem, 14px );
	--px-font-nav-line-height: 1.3;
	--px-font-nav-color: var(--px-color-white);
	--px-font-nav-color-hover: var(--px-color-gold);

	--px-font-hero-heading-size: clamp(40px, 6vw, 72px);
	--px-font-hero-heading-line-height: 1.05;

	/* Spacing */
	--px-gap-xs: 4px;
	--px-gap-sm: 8px;
	--px-gap-md: 16px;
	--px-gap-lg: 24px;
	--px-gap-xl: 40px;
	--px-gap-2xl: 64px;

	/* Font sizes — generic scale, also clamp-based */
	--px-font-size-sm: clamp( 0.8rem, 0.3vw + 0.72rem, 0.875rem );
	--px-font-size-base: clamp( 0.9rem, 0.3vw + 0.82rem, 1rem );
	--px-font-size-md: clamp( 1.1rem, 0.6vw + 0.95rem, 1.25rem );
	--px-font-size-lg: clamp( 1.4rem, 1.2vw + 1.1rem, 1.75rem );
	--px-font-size-xl: clamp( 1.9rem, 2vw + 1.4rem, 2.5rem );
	--px-font-size-2xl: clamp( 2.4rem, 3vw + 1.7rem, 3.5rem );

	/* Radius */
	--px-radius-sm: 4px;
	--px-radius-md: 8px;
	--px-radius-lg: 16px;
	--px-radius-full: 9999px;

	/* Shadows */
	--px-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--px-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
	--px-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

	/* Transitions */
	--px-transition-fast: 150ms ease;
	--px-transition-base: 250ms ease;
	--px-transition-slow: 400ms ease;

	/* Breakpoints (reference only, used in media query comments) */
	--px-breakpoint-sm: 480px;
	--px-breakpoint-md: 768px;
	--px-breakpoint-lg: 1024px;
	--px-breakpoint-xl: 1550px;
}