/**
 * warmy-blog-tokens.css
 * CSS custom properties required by warmy-blog header and footer.
 * Loaded before warmy-blog-header.css and warmy-blog-footer.css.
 * Does NOT override existing warmy.dev tokens — only adds blog-specific vars.
 */

/* BricolageGrotesque — used as --font-heading on non-EN pages */
@font-face {
	font-family: 'BricolageGrotesque';
	src: url('../fonts/BricolageGrotesque.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Typography */
	--font-heading: 'BricolageGrotesque', system-ui, sans-serif;
	--font-figtree: 'Figtree', sans-serif;

	/* Header geometry */
	--hdr-bg:              #faf4e7;
	--hdr-height:          72px;
	--hdr-height-mob:      52px;
	--hdr-px:              140px;
	--hdr-px-mob:          24px;

	/* Nav colours */
	--nav-text:            #4f5665;
	--nav-dark:            #2d4059;
	--Gray-Hard:           #505869;
	--nav-blue:            #3978f2;
	--nav-blue-hover:      #2d67e0;
	--nav-secondary:       #505869;
	--nav-border:          rgba(45, 64, 89, 0.10);
	--nav-border-faint:    rgba(45, 64, 89, 0.07);
	--color-border-light:  #eaecee;
	--color-orange-hover:  #F7761F;
	--orange-400:          #F7761F;

	/* Nav typography */
	--nav-fsize:           16px;
	--nav-fsize-sm:        14px;
	--nav-fsize-xs:        13px;
	--nav-fsize-md:        15px;
	--nav-fsize-lg:        18px;
	--nav-lh:              24px;
	--nav-ls:              0.032px;
	--nav-fw-medium:       500;
	--nav-fw-bold:         700;

	/* Nav underline animation */
	--nav-active-gradient: linear-gradient(90deg, #fda22f 0%, #f53838 100%);
	--nav-active-h:        4px;

	/* Dropdowns */
	--dropdown-bg:         #ffffff;
	--dropdown-radius:     10px;
	--dropdown-shadow:     3px 3px 27px 0 rgba(156, 156, 156, 0.25);
	--dropdown-gap:        24px;

	/* Mega menu */
	--mega-col-gap:        40px;
	--mega-col-title-c:    #4f5665;
	--mega-col-title-fz:   1.25rem;
	--mega-col-title-fw:   600;
	--mega-col-title-ls:   0.6px;
	--mega-link-hover-bg:  rgba(57, 120, 242, 0.06);
	--mega-inner-shadow:   0 13px 20px rgba(187, 178, 160, 0.30);

	/* Buttons */
	--btn-radius:          6px;
	--btn-h:               40px;
	--btn-px:              24px;
	--featured-img-h:      240px;
	--placeholder-bg:      #f0ebe0;

	/* Mobile menu */
	--mobile-menu-w:       100%;
	--mobile-menu-bg:      #faf4e7;
	--mobile-panel-slide:  300ms cubic-bezier(0.4, 0, 0.2, 1);
	--overlay-bg:          rgba(0, 0, 0, 0.35);

	/* Z-index */
	--z-header:            100;
	--z-dropdown:          110;
	--z-mobile-menu:       200;
	--z-overlay:           190;

	/* Container */
	--container-max:       1440px;
	--container-px:        var(--hdr-px);
	--container-px-mob:    var(--hdr-px-mob);
}

/* English: use GT Flexa as heading font */
html:lang(en) {
	--font-heading: 'GT Flexa', system-ui, sans-serif;
}

/* Minimal global reset needed by header/footer (non-conflicting) */
*,
*::before,
*::after {
	box-sizing: border-box;
}