/**
 * Design-Tokens nach CD Graubünden (Figma «00. Library – Design-System», Export 30.03.2026).
 * Quelle: claude/CD-Web-Specs_Tokens_Komponenten.md und CD-Web-Specs_Shop-Bausteine.md.
 *
 * Hinweis: Die vollständige Primitive-Liste steht in gr-tokens.css des Kantons. Hier nur, was das
 * Theme braucht. Werte nicht «nach Gefühl» ändern, sondern gegen Figma prüfen.
 */

@font-face {
	font-family: "Eudoxus Sans";
	src: url("../fonts/EudoxusSans-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Eudoxus Sans";
	src: url("../fonts/EudoxusSans-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* ---------- Schrift ---------- */
	--font-sans: "Eudoxus Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Typo-Skala Desktop (Mobile/Tablet unten überschrieben) */
	--fs-heading-xxl: 96px;
	--fs-heading-xl: 56px;
	--fs-heading-l: 48px;
	--fs-heading-m: 40px;
	--fs-heading-s: 32px;
	--fs-heading-xs: 24px;
	--fs-heading-xxs: 20px;
	--fs-body-l: 20px;
	--fs-body-m: 18px;
	--fs-body-s: 16px;
	--fs-detail: 14px;

	--lh-heading: 1.2;
	--lh-heading-s: 1.2;
	--lh-heading-xs: 1.3;
	--lh-heading-xxs: 1.4;
	--lh-body: 1.5;

	/* ---------- Farben: Accent Blue ---------- */
	--blue-50: #ebf5ff;
	--blue-100: #d1e7ff;
	--blue-200: #b5d9ff;
	--blue-300: #73b5ff;
	--blue-500: #0064c8;
	--blue-600: #00488f;
	--blue-700: #003061;
	--blue-800: #001c38;

	/* ---------- Farben: Neutral ---------- */
	--white: #ffffff;
	--black: #000000;
	--neutral-50: #f3f3f3;
	--neutral-75: #f2f2f2;
	--neutral-100: #eaeaea;
	--neutral-200: #dcdcdc; /* PDF-Wert, Figma hat #dfdfdf */
	--neutral-300: #bfbfbf;
	--neutral-500: #808080;
	--neutral-600: #606060;
	--neutral-700: #404040;
	--neutral-750: #353535;
	--neutral-800: #202020;
	--neutral-900: #1a1a1a;

	/* ---------- Farben: Gelb (Service Card) ---------- */
	--yellow-200: #ffeb8c;
	--yellow-150: #fff0aa;
	--yellow-100: #fff8d9;
	--yellow-400: #f9dd4b;

	/* ---------- Semantisch ---------- */
	--info-bg: #eff6ff;
	--info-title: #1e40af;
	--info-text: #1d4ed8;
	--success-bg: #f2fdf5;
	--success-title: #306339;
	--success-text: #3c7e44;
	--success-strong: #5ec269;
	--warning-bg: #fefcea;
	--warning-title: #7d501f;
	--warning-text: #986523;
	--error-bg: #fcf2f2;
	--error-title: #8c2822;
	--error-text: #aa2e26;
	--error-hover: #de2d22;
	--error-pressed: #dd524c;

	/* ---------- Rollen ---------- */
	--color-text: var(--neutral-900);
	--color-text-muted: var(--neutral-700);
	--color-border: var(--neutral-200);
	--color-hover: var(--neutral-50);
	--color-pressed: var(--neutral-100);
	--color-link: var(--blue-700);
	--color-link-hover: var(--blue-800);
	--color-focus-ring: #1d4ed8;

	/* ---------- Layout ---------- */
	--page-gutter: 56px;
	--content-small: 720px;
	--content-large: 1800px;
	--content-max: 1440px;
	--radius-round: 100px;
	--header-height: 172px; /* Desktop zweizeilig, Header gr.ch (Figma) */
	--elevation-header: 0 2px 16px rgba(0, 0, 0, 0.1);

	/* ---------- Spacing (Desktop) ---------- */
	--space-4xs: 4px;
	--space-3xs: 8px;
	--space-2xs: 16px;
	--space-xs: 24px;
	--space-s: 32px;
	--space-m: 40px;
	--space-l: 56px;
	--space-xl: 64px;
	--space-2xl: 80px;
	--space-3xl: 120px;
	--space-4xl: 156px;
}

/* Expanded/Medium (Tablet): 700–1199 px */
@media (max-width: 1199px) {
	:root {
		--page-gutter: 48px;
		--header-height: 72px;

		--fs-heading-xxl: 56px;
		--fs-heading-xl: 48px;
		--fs-heading-l: 40px;
		--fs-heading-m: 32px;
		--fs-heading-s: 24px;
		--fs-heading-xs: 20px;
		--fs-heading-xxs: 18px;
		--lh-heading-s: 1.3;
		--lh-heading-xs: 1.4;
		--lh-heading-xxs: 1.5;

		--space-4xs: 2px;
		--space-3xs: 8px;
		--space-2xs: 8px;
		--space-xs: 16px;
		--space-s: 24px;
		--space-m: 32px;
		--space-l: 40px;
		--space-xl: 48px;
		--space-2xl: 64px;
		--space-3xl: 80px;
		--space-4xl: 120px;
	}
}

/* Compact (Phone): bis 699 px */
@media (max-width: 699px) {
	:root {
		--page-gutter: 20px;
		--header-height: 64px;

		--space-3xs: 4px;
		--space-s: 16px;
		--space-m: 24px;
		--space-l: 32px;
		--space-xl: 40px;
		--space-2xl: 48px;
		--space-3xl: 56px;
		--space-4xl: 64px;
	}
}