/*
 * Skin najLEPŠIEmobily.sk (WA_SITE_ID in wa-config.php, includes/theme/site.php), loaded right after tokens.css.
 * Colour and radius primitives copied 1:1 from the Automatic.css configuration of the live
 * najlepsiemobily.sk Oxygen build (same build as mobilky, other ACSS values). Everything not
 * listed here (base, shade, type, space) is the same on both shops and stays in tokens.css.
 */

:root {
	/* ---- Colour: primary ---- */
	--primary: #2498ca;
	--primary-hover: #208ab7;
	--primary-ultra-light: #f2f9fd;
	--primary-light: #cbe9f6;
	--primary-semi-light: #67bfe4;
	--primary-medium: #26a3d9;
	--primary-semi-dark: #1b7298;
	--primary-dark: #0f4157;
	--primary-ultra-dark: #08212b;
	--primary-trans-10: rgba(36, 152, 202, 0.1);
	--primary-trans-20: rgba(36, 152, 202, 0.2);
	--primary-trans-80: rgba(36, 152, 202, 0.8);
	--primary-ultra-dark-trans-10: rgba(8, 33, 43, 0.1);
	--primary-ultra-dark-trans-20: rgba(8, 33, 43, 0.2);
	--primary-ultra-dark-trans-80: rgba(8, 33, 43, 0.8);

	/* ---- Colour: secondary ---- */
	--secondary: #f3fbff;
	--secondary-hover: #c3ebff;
	--secondary-ultra-light: #f0faff;
	--secondary-light: #c2ebff;
	--secondary-semi-light: #4dc3ff;
	--secondary-medium: #00aaff;
	--secondary-semi-dark: #0077b3;
	--secondary-dark: #005580;
	--secondary-ultra-dark: #002233;

	/* ---- Colour: accent ---- */
	--accent: #a1c900;
	--accent-hover: #8fb300;
	--accent-ultra-light: #fcfff0;
	--accent-light: #f3ffc2;
	--accent-semi-light: #dbff4d;
	--accent-medium: #ccff00;
	--accent-semi-dark: #8fb300;
	--accent-dark: #668000;
	--accent-ultra-dark: #293300;

	/* ---- Cart: band between phone groups (tokens.css has the mobilky tint) ---- */
	--nd-c-group-divider: var(--secondary);

	/* ---- Radius (ACSS scale grows towards xxl; xxl = the pill buttons of the live site) ---- */
	--radius: 1rem;
	--radius-xs: 0.4444444444rem;
	--radius-s: 0.6666666667rem;
	--radius-m: 1rem;
	--radius-l: 1.5rem;
	--radius-xl: 2.25rem;
	--radius-xxl: 3.375rem;

	/* ---- Redesign radii: the mockup's own values (it was drawn for this shop) ----
	 * tokens.css maps these onto the mobilky scale; on this scale that would turn inputs,
	 * checkboxes and tags into pills, so they take the mockup px directly. */
	--nd-radius: 10px;
	--nd-radius-m: 8px;
	--nd-radius-s: 6px;
	--nd-radius-xs: 4px;
	--nd-radius-pill: 999px;
	--nd-radius-btn: 999px;
}