/**
 * Visiokom design tokens.
 *
 * The single source of truth for colors, type, spacing, motion and layout.
 * Loaded site-wide before every other stylesheet (handle: visiokom-tokens).
 *
 * Rules:
 *  - Never hardcode a value that has a token. Use var(--vk-*).
 *  - New tokens are added here AND documented in wp-content/DESIGN-SYSTEM.md.
 *  - Plugin stylesheets consume these with a literal fallback, e.g.
 *    var(--vk-accent, #c8102e), so they degrade gracefully without the theme.
 */

:root {
	/* ---- Ink (text on light surfaces) ---- */
	--vk-ink: #1b1f24;            /* headings, emphasised text */
	--vk-ink-soft: #5a626b;       /* body copy, secondary text */
	--vk-ink-faint: #a2a8af;      /* separators, de-emphasised labels */

	/* ---- Ink on dark surfaces ---- */
	--vk-ink-invert: #f5f6f7;      /* near-white text on dark */
	--vk-ink-invert-soft: #c8ccd1; /* body copy on dark */
	--vk-ink-invert-muted: #9aa1a9;/* footer links, quiet labels on dark */

	/* ---- Surfaces ---- */
	--vk-bg: #ffffff;             /* default page / panel surface */
	--vk-bg-muted: #f6f4f2;       /* warm grey alternate section */
	--vk-bg-media: #fafafa;       /* behind contained product images */
	--vk-bg-dark: #16181d;        /* dark ink sections, footer */
	--vk-bg-darker: #101216;      /* footer bottom bar */

	/* ---- Brand accent (Visiokom red) — use sparingly ---- */
	--vk-accent: #c8102e;
	--vk-accent-dark: #a50d26;    /* hover/active state of the accent */

	/* ---- CMYK process inks (print-shop signature details) ---- */
	--vk-cyan: #00a3e0;
	--vk-magenta: #e0007a;
	--vk-yellow: #ffcf00;
	--vk-key: #000000;
	/* Ready-made registration strips (use as background on a thin element). */
	--vk-cmyk-strip: linear-gradient(90deg,
		var(--vk-cyan) 0 25%, var(--vk-magenta) 25% 50%,
		var(--vk-yellow) 50% 75%, var(--vk-key) 75% 100%);
	--vk-cmyk-strip-vertical: linear-gradient(180deg,
		var(--vk-cyan) 0 25%, var(--vk-magenta) 25% 50%,
		var(--vk-yellow) 50% 75%, var(--vk-key) 75% 100%);

	/* ---- Borders ---- */
	--vk-border: #d9dce0;                        /* on light surfaces */
	--vk-border-invert: rgba(255, 255, 255, .08); /* hairlines on dark */
	--vk-border-invert-strong: #3a4048;           /* visible boxes on dark */

	/* ---- Layout ---- */
	--vk-container: 1240px;
	/* Spacing scale — prefer these steps for margins/paddings/gaps. */
	--vk-space-1: 8px;
	--vk-space-2: 16px;
	--vk-space-3: 24px;
	--vk-space-4: 32px;
	--vk-space-5: 48px;
	--vk-space-6: 64px;
	/* Vertical padding of a full-width section (scales up at breakpoints). */
	--vk-section-pad: 44px;
	/* Gap between cards in a grid (scales up at breakpoints). */
	--vk-card-gap: 14px;

	/* ---- Shape — the design is flat and squared ---- */
	--vk-radius: 0; /* always 0; do not introduce rounded corners */

	/* ---- Elevation ---- */
	--vk-shadow-lift: 0 12px 24px -12px rgba(27, 31, 36, .25);

	/* ---- Motion ---- */
	--vk-anim-fast: .15s ease; /* color/background changes */
	--vk-anim: .2s ease;       /* borders, small movement */
	--vk-anim-slow: .25s ease; /* transforms (lift, slide, zoom) */

	/* ---- Typography ---- */
	/* Fixed sizes */
	--vk-text-xs: 11px;   /* eyebrows, microcopy (uppercase + tracking) */
	--vk-text-sm: 13px;   /* meta, column headings, breadcrumbs */
	--vk-text-base: 15px; /* card titles, buttons, footer copy */
	--vk-text-md: 16px;   /* body copy in sections/panels */
	--vk-text-lg: 18px;   /* emphasised intro lines */
	/* Fluid heading sizes */
	--vk-title-hero: clamp(26px, 6vw, 46px);
	--vk-title-section: clamp(20px, 4.5vw, 30px);
	--vk-title-panel: clamp(20px, 4.5vw, 28px);
	--vk-lead-hero: clamp(15px, 3.5vw, 19px);
	/* Letter spacing */
	--vk-tracking: .02em;       /* slightly opened card titles */
	--vk-tracking-wide: .08em;  /* uppercase labels */
	--vk-tracking-wider: .14em; /* eyebrows */
}

/* Section padding / card gap scale up with the viewport (mobile-first). */
@media (min-width: 600px) {
	:root {
		--vk-section-pad: 60px;
		--vk-card-gap: 18px;
	}
}
@media (min-width: 900px) {
	:root {
		--vk-section-pad: 72px;
		--vk-card-gap: 20px;
	}
}