/* Bionika design tokens. Phase 3, 2026-11-10.
   Brand values were measured on the old site (The7 + Elementor). No design refresh: layout, colors, fonts, spacing and line heights follow the old site. */
:root {
	/* Brand colors (measured) */
	--bn-color-brand: #3db048;          /* menu links, buttons, shape dividers, slider panel */
	--bn-color-brand-light: #45c751;    /* top of the mega menu gradient, hero button */
	--bn-color-brand-dark: #2b8c35;     /* bottom of the mega menu gradient */
	--bn-color-brand-darker: #246428;   /* hero slide title */
	--bn-color-brand-hover: #36953c;    /* hero button hover */
	--bn-color-text: #85868c;           /* body text of the old site */
	--bn-color-text-body: #7a7a7a;      /* Elementor text widget */
	--bn-color-heading: #333333;        /* Elementor heading, mobile menu */
	--bn-color-info: #6ec1e4;           /* home image box titles (h4) */
	--bn-color-footer-bg: #1a1c20;      /* The7 footer option */
	--bn-color-footer-panel: rgba(97, 99, 101, 0.84); /* footer panel measured */
	--bn-color-footer-text: #c9ccd1;
	--bn-color-surface: #fff;
	--bn-color-bg: #fff;
	--bn-color-border: #e3e5e8;
	--bn-focus: #1b6f24;                /* focus ring, 5.9:1 on white */
	--bn-mega-gradient: linear-gradient(0deg, #45c751 0, #2b8c35 100%);

	/* Fonts (self hosted woff2 in assets/fonts) */
	--bn-font-text: "Montserrat", Helvetica, Arial, Verdana, sans-serif;
	--bn-font-heading: "Jura", Helvetica, Arial, Verdana, sans-serif;

	/* Type scale helpers (old site: h1 43, h2 20 to 24, h4 18, p 15, line height 22px) */
	--bn-fs-xs: 0.8125rem;   /* 13 */
	--bn-fs-sm: 0.875rem;    /* 14 */
	--bn-fs-base: 0.9375rem; /* 15 */
	--bn-fs-md: 1.125rem;    /* 18 */
	--bn-fs-lg: 1.375rem;    /* 22 */
	--bn-fs-xl: 1.625rem;    /* 26 */
	--bn-fs-2xl: 1.9375rem;  /* 31 */
	--bn-fs-3xl: 2.3125rem;  /* 37 */
	--bn-fs-4xl: 2.6875rem;  /* 43, the old h3 and fancy title */
	--bn-lh-text: 1.6;       /* refresh: was 22px on 15px (1.47) */
	--bn-lh-heading: 1.2;

	/* Spacing helpers */
	--bn-sp-1: 4px;
	--bn-sp-2: 8px;
	--bn-sp-3: 12px;
	--bn-sp-4: 16px;
	--bn-sp-5: 24px;
	--bn-sp-6: 32px;
	--bn-sp-7: 48px;
	--bn-sp-8: 64px;
	--bn-sp-9: 96px;

	/* Layout (measured) */
	--bn-header-height: 85px;
	--bn-wrap-width: 1300px;
	--bn-content-width: 1140px;
	--bn-bp-mobile: 1050px;
	--bn-bp-small: 778px;
	--bn-radius-panel: 30px;     /* mega menu bottom corners */
	--bn-radius-pill: 35px;      /* hero button */
	--bn-shadow-header: 0 0 15px 1px rgba(0, 0, 0, 0.07);
}

/* Legacy names used by base.css, components.css, forms.css and the block CSS. Values come from the brand tokens above. */
:root {
	--bn-color-accent: var(--bn-color-brand);
	--bn-color-accent-dark: var(--bn-color-brand-hover);
	--bn-color-accent-darker: var(--bn-color-brand);
	--bn-color-accent-hover: var(--bn-color-brand-hover);
	--bn-color-link-hover: var(--bn-color-brand-dark);
	--bn-color-heading: #333;
	--bn-color-white: #fff;
	--bn-font-size: 15px;
	--bn-line-height: 22px;
	--bn-wrap-pad: 50px;
}