/**
 * Zestino designsystem – designtokens.
 *
 * Alt av farge, typografi, avstand og bevegelse defineres her.
 * Endrer du en verdi her, endrer du den overalt på nettstedet.
 */

:root {
	/* ---------- Farger: base ---------- */
	--z-black: #000000;
	--z-ink: #08080a; /* sidebakgrunn */
	--z-surface: #101013; /* kort, paneler */
	--z-surface-2: #17171c; /* hevet panel, hover */
	--z-surface-3: #202027; /* input, aktiv rad */
	--z-line: #2a2a32; /* standard skillelinje */
	--z-line-soft: rgba(255, 255, 255, 0.08);

	/* ---------- Farger: merkevare ---------- */
	--z-red: #e20e17;
	--z-red-hover: #ff1b25;
	--z-red-deep: #a4080f;
	--z-red-glow: rgba(226, 14, 23, 0.45);

	/* ---------- Farger: tekst ---------- */
	--z-text: #ffffff;
	--z-text-muted: #b6b6bf;
	--z-text-dim: #7d7d88;
	--z-text-on-red: #ffffff;

	/* ---------- Farger: status ---------- */
	--z-success: #22c55e;
	--z-warning: #f59e0b;
	--z-danger: #ef4444;
	--z-info: #38bdf8;

	/* ---------- Lager-status (to lager) ---------- */
	--z-stock-no: #22c55e; /* Norge – rask levering */
	--z-stock-eu: #f59e0b; /* EU – lengre leveringstid */
	--z-stock-out: #6b6b76;

	/* ---------- Typografi ---------- */
	--z-font-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
	--z-font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--z-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

	--z-fw-normal: 400;
	--z-fw-medium: 500;
	--z-fw-semibold: 600;
	--z-fw-bold: 700;
	--z-fw-black: 800;

	/* Flytende typeskala – skalerer mellom 360px og 1440px viewport */
	--z-fs-display: clamp(3rem, 1.2rem + 8vw, 8rem);
	--z-fs-h1: clamp(2.25rem, 1.1rem + 5vw, 5rem);
	--z-fs-h2: clamp(1.75rem, 1rem + 3.2vw, 3.25rem);
	--z-fs-h3: clamp(1.375rem, 1rem + 1.6vw, 2rem);
	--z-fs-h4: clamp(1.125rem, 0.95rem + 0.9vw, 1.5rem);
	--z-fs-h5: clamp(1rem, 0.95rem + 0.4vw, 1.175rem);
	--z-fs-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
	--z-fs-small: 0.875rem;
	--z-fs-tiny: 0.75rem;

	--z-lh-tight: 0.92;
	--z-lh-snug: 1.12;
	--z-lh-normal: 1.55;
	--z-lh-relaxed: 1.7;

	--z-ls-display: -0.02em;
	--z-ls-label: 0.14em;
	--z-ls-nav: 0.08em;

	/* ---------- Avstand (8px-rutenett) ---------- */
	--z-space-3xs: 0.25rem;
	--z-space-2xs: 0.5rem;
	--z-space-xs: 0.75rem;
	--z-space-sm: 1rem;
	--z-space-md: 1.5rem;
	--z-space-lg: 2rem;
	--z-space-xl: 3rem;
	--z-space-2xl: 4rem;
	--z-space-3xl: 6rem;
	--z-space-4xl: 8rem;

	--z-section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
	--z-gutter: clamp(1.25rem, 0.5rem + 2.5vw, 3rem);
	--z-container: 1320px;
	--z-container-wide: 1560px;
	--z-container-narrow: 780px;

	/* ---------- Form ---------- */
	--z-radius-none: 0;
	--z-radius-xs: 2px;
	--z-radius-sm: 4px;
	--z-radius-md: 8px;
	--z-radius-lg: 16px;
	--z-radius-pill: 999px;

	--z-border: 1px solid var(--z-line);
	--z-border-soft: 1px solid var(--z-line-soft);

	/* ---------- Skygger ---------- */
	--z-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
	--z-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55);
	--z-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.65);
	--z-shadow-red: 0 8px 32px var(--z-red-glow);

	/* ---------- Bevegelse ---------- */
	--z-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--z-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--z-dur-fast: 140ms;
	--z-dur: 240ms;
	--z-dur-slow: 480ms;

	/* ---------- Lag ---------- */
	--z-z-base: 1;
	--z-z-sticky: 100;
	--z-z-header: 200;
	--z-z-drawer: 300;
	--z-z-overlay: 400;
	--z-z-toast: 500;

	/* ---------- Layout-mål ---------- */
	--z-header-h: 88px;
	--z-header-h-scrolled: 68px;
	--z-topbar-h: 36px;
}

@media (max-width: 1024px) {
	:root {
		--z-header-h: 72px;
		--z-header-h-scrolled: 64px;
	}
}

/* Respekter brukerens bevegelsespreferanser. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--z-dur-fast: 1ms;
		--z-dur: 1ms;
		--z-dur-slow: 1ms;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}