/* Dyrk Frames — design tokens */

:root {
	/* Brand */
	--dyrk-blue: #1643e4;          /* sampled from the logo */
	--dyrk-blue-dark: #1136bb;
	--dyrk-blue-soft: #eaefff;

	/* Surfaces */
	--dyrk-navy: #0a1a3c;          /* header, dark sections */
	--dyrk-navy-deep: #050e22;     /* footer */
	--dyrk-navy-mid: #102a5c;
	--dyrk-white: #ffffff;
	--dyrk-bg-soft: #f5f7fa;

	/* Text */
	--dyrk-text: #1b2439;
	--dyrk-text-muted: #5a6b8c;
	--dyrk-text-invert: #ffffff;
	--dyrk-text-invert-muted: rgba(255, 255, 255, 0.7);

	/* Lines */
	--dyrk-line: #e4e9f2;
	--dyrk-line-invert: rgba(255, 255, 255, 0.12);

	/* Type */
	--dyrk-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--dyrk-fs-eyebrow: 0.75rem;
	--dyrk-fs-body: 1rem;
	--dyrk-fs-h3: 1.25rem;
	--dyrk-fs-h2: 2rem;
	--dyrk-fs-h1: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
	--dyrk-tracking-wide: 0.08em;

	/* Layout */
	--dyrk-container: 1240px;
	--dyrk-gutter: 20px;
	--dyrk-header-h: 76px;
	--dyrk-radius: 4px;
	--dyrk-radius-lg: 8px;

	/* Effects */
	--dyrk-shadow-sm: 0 1px 3px rgba(10, 26, 60, 0.08);
	--dyrk-shadow-md: 0 8px 24px rgba(10, 26, 60, 0.1);
	--dyrk-transition: 0.2s ease;
	--dyrk-z-header: 1000;
	--dyrk-z-panel: 1010;
}

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