/*
 * Design tokens (Figma: Verisana - Test).
 *
 * Fonts are self-hosted (SIL Open Font License): Newsreader and Newsreader Italic
 * (variable, opsz 6–72, wght 200–800), Geist (variable, wght 100–900),
 * Inter 400 and Sora 800.
 *
 * Breakpoints can't be CSS variables; home.css uses:
 *   desktop  min-width: 1024px  sections at their Figma size (frame 1:111, 1440px)
 *   wide     min-width: 1280px  rows that need the full 1280px content width
 */

@font-face {
	font-family: "Newsreader";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/newsreader-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Newsreader";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/newsreader-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Newsreader";
	font-style: italic;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/newsreader-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Newsreader";
	font-style: italic;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/newsreader-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Geist";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/geist-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Geist";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/geist-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter and Sora each set one short Latin label in Figma, so only the Latin subset is included. */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/sora-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Colors (Figma variables) */
	--vs-color-primary: #1988b9;
	--vs-color-white: #fff;
	--vs-color-black: #000;
	--vs-color-text: #263d68;
	--vs-color-grey: #252525;
	--vs-color-grey-2: #515151;
	--vs-color-background: #fbfbfb;

	/* Colors (used in Figma without a variable) */
	--vs-color-ink: #1a1a1a;
	--vs-color-muted: #6b7280;
	--vs-color-surface: #f6f7f8;
	--vs-color-chip: #fafafa;
	--vs-color-tint: #f3f9fb;
	--vs-color-tint-strong: #e6f4fa;
	--vs-color-tint-button: #ebf5f9;
	--vs-color-divider: #ebebeb;
	--vs-color-border: #e5e5e5;

	/* Fonts */
	--vs-font-serif: "Newsreader", Georgia, "Times New Roman", serif;
	--vs-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--vs-font-inter: "Inter", var(--vs-font-sans);
	--vs-font-sora: "Sora", var(--vs-font-sans);
	/*
	 * Navigation, several buttons, prices and "In den Warenkorb" use Biotif in Figma.
	 * It's a commercial font, so Geist stands in until licensed web font files are
	 * added to assets/fonts/.
	 */
	--vs-font-ui: var(--vs-font-sans);

	/* Type scale: size / line height / letter spacing */
	--vs-text-display: 66px;
	--vs-leading-display: 70px;
	--vs-tracking-display: -2px;

	--vs-text-h2: 40px;
	--vs-leading-h2: 52px;

	--vs-text-lg: 18px;
	--vs-leading-lg: 24px;
	--vs-leading-lg-tight: 18px;

	--vs-text-md: 16px;
	--vs-leading-md: 20px;
	--vs-leading-md-loose: 21px;
	--vs-tracking-footer: 0.5px;

	--vs-text-sm: 14px;
	--vs-leading-sm: 18px;
	--vs-leading-sm-tight: 16px;

	/* Spacing */
	--vs-space-1: 4px;
	--vs-space-2: 8px;
	--vs-space-4: 16px;
	--vs-space-6: 24px;
	--vs-space-8: 32px;
	--vs-space-10: 40px;
	--vs-space-20: 80px;
	--vs-space-30: 120px;

	/* Radius */
	--vs-radius-md: 8px;
	--vs-radius-lg: 16px;
	--vs-radius-pill: 999px;

	/* Shadows. Figma drop shadows render like CSS box-shadow with twice the blur. */
	--vs-shadow-card: 0 20px 30px rgb(0 0 0 / 0.1);

	/* Layout */
	--vs-header-height: 82px;
	--vs-container: 1280px;
	/* Provisional until the mobile frame (1:600) is built. */
	--vs-gutter: 20px;
	--vs-section-gap: 64px;
}

@media (min-width: 1024px) {
	:root {
		--vs-gutter: var(--vs-space-20);
		--vs-section-gap: var(--vs-space-30);
	}
}