/**
 * Napp design tokens — single source: .nexo/design-system/tokens.md (Phase 2 FINAL, 2026-07-09).
 * Never hardcode these hex values in widgets — read the custom properties.
 */

:root {
	/* color */
	--napp-ink: #0d3161;
	--napp-cream: #f9f6f2;
	--napp-surface: #ffffff;
	--napp-card: #e7eff6;
	/* The exact background baked into the product renders. The media panel uses
	   this so the photograph blends into its panel instead of reading as a
	   lighter rectangle pasted inside a darker card. Re-sample with:
	   magick <render>.png -format "%[pixel:p{20,20}]" info:  */
	--napp-media-field: #c3dcf1;
	--napp-band: #97bcda;
	--napp-link: #2c5c8f;
	--napp-stroke: #a0b6cd;

	/*
	 * Secondary text. Was consumed in 7 places and defined in none, so every
	 * var(--napp-muted) fell back to inherited ink and supporting copy rendered
	 * at the same weight as headings. 5.0:1 on white, 4.6:1 on --napp-cream: AA.
	 */
	--napp-muted: #5b708a;

	/*
	 * Hairline for card edges. --napp-stroke (#a0b6cd) is a FILL tone; at 1px it
	 * reads as a wireframe outline. Keep --napp-stroke for fills and dividers
	 * that already depend on it; use this for card borders.
	 */
	--napp-hairline: #e2e9f1;
	--napp-shadow-card: 0 1px 2px rgb(13 49 97 / 0.04), 0 10px 28px rgb(13 49 97 / 0.06);
	--napp-glow: #f7e7c3;
	--napp-night: #0f1e3a;

	/* type */
	--napp-font-display: 'Rubik', 'Heebo', sans-serif;
	--napp-font-body: 'Heebo', sans-serif;

	/* fluid type scale */
	--napp-text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
	--napp-text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
	--napp-text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
	--napp-text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
	--napp-text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
	--napp-text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
	/* Page title: every H1 on the site except the home hero. Sits deliberately
	   between 3xl and hero so a page title outranks a section H2 (2xl) without
	   competing with the hero. Before this existed there were four independent
	   H1 clamps and a Hello Elementor fallback, so the headline size changed on
	   almost every page. */
	--napp-text-title: clamp(2.125rem, 1.7rem + 2.1vw, 3.25rem);
	--napp-text-hero: clamp(2.5rem, 2rem + 4vw, 4.5rem);

	/* geometry */
	--napp-radius-card: 24px;
	--napp-radius-spot: 28px;
	--napp-radius-pill: 999px;
	--napp-touch-min: 44px;

	/* rhythm */
	--napp-section-gap: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
	--napp-container: min(94vw, 1200px);
}

/* Self-hosted variable fonts — Hebrew + Latin subsets, swap. */
@font-face {
	font-family: 'Heebo';
	src: url('../fonts/heebo-hebrew.woff2') format('woff2');
	font-weight: 300 900;
	font-display: swap;
	unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
	font-family: 'Heebo';
	src: url('../fonts/heebo-latin.woff2') format('woff2');
	font-weight: 300 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Rubik';
	src: url('../fonts/rubik-hebrew.woff2') format('woff2');
	font-weight: 300 900;
	font-display: swap;
	unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
	font-family: 'Rubik';
	src: url('../fonts/rubik-latin.woff2') format('woff2');
	font-weight: 300 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}