/**
 * Burak Varol design tokens.
 *
 * This file intentionally contains custom properties only.
 */

:root {
	/* Color */
	--bv-bg: #0b0f17;
	--bv-surface: #111722;
	--bv-surface-elevated: #171e2b;
	--bv-primary: #7c3aed;
	--bv-primary-hover: color-mix(in srgb, var(--bv-primary) 84%, var(--bv-text));
	--bv-accent: #31cfb4;
	--bv-accent-hover: color-mix(in srgb, var(--bv-accent) 84%, var(--bv-text));
	--bv-text: #f5f7fa;
	--bv-text-secondary: #a7b0be;
	--bv-text-muted: #727c8b;
	--bv-border: rgba(255, 255, 255, 0.1);
	--bv-light-bg: #f5f5f2;
	--bv-light-text: #111318;
	--bv-focus-color: var(--bv-accent);
	--bv-selection-bg: var(--bv-primary);
	--bv-selection-text: var(--bv-text);

	/* Typography */
	--bv-font-sans: "Space Grotesk", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--bv-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	--bv-font-weight-regular: 400;
	--bv-font-weight-medium: 500;
	--bv-font-weight-semibold: 600;
	--bv-font-weight-bold: 700;
	--bv-type-display-xl: clamp(3rem, 7vw, 6.5rem);
	--bv-type-display-lg: clamp(2.625rem, 5.5vw, 5rem);
	--bv-type-h1: clamp(2.25rem, 4.5vw, 4rem);
	--bv-type-h2: clamp(1.875rem, 3.4vw, 3rem);
	--bv-type-h3: clamp(1.5rem, 2.4vw, 2.25rem);
	--bv-type-h4: clamp(1.25rem, 1.7vw, 1.625rem);
	--bv-type-body-lg: clamp(1.125rem, 1.3vw, 1.25rem);
	--bv-type-body: 1rem;
	--bv-type-body-sm: 0.875rem;
	--bv-type-label: 0.75rem;
	--bv-leading-tight: 1.08;
	--bv-leading-heading: 1.2;
	--bv-leading-body: 1.65;
	--bv-tracking-tight: -0.03em;
	--bv-tracking-label: 0.1em;

	/* Layout */
	--bv-container-max: 80rem;
	--bv-reading-max: 47.5rem;
	--bv-grid-columns: 12;
	--bv-grid-gap: clamp(1rem, 2vw, 2rem);
	--bv-container-padding: 1rem;

	/* Spacing */
	--bv-space-1: 0.25rem;
	--bv-space-2: 0.5rem;
	--bv-space-3: 0.75rem;
	--bv-space-4: 1rem;
	--bv-space-6: 1.5rem;
	--bv-space-8: 2rem;
	--bv-space-12: 3rem;
	--bv-space-16: 4rem;
	--bv-space-24: 6rem;
	--bv-space-32: 8rem;
	--bv-section-space: clamp(var(--bv-space-16), 9vw, var(--bv-space-32));
	--bv-section-space-compact: clamp(var(--bv-space-12), 6vw, var(--bv-space-24));

	/* Shape */
	--bv-radius-small: 0.375rem;
	--bv-radius-default: 0.75rem;
	--bv-radius-large: 1.25rem;
	--bv-radius-full: 999px;
	--bv-border-width: 1px;
	--bv-focus-width: 2px;
	--bv-focus-offset: 3px;
	--bv-shadow-subtle: 0 1rem 3rem rgba(0, 0, 0, 0.2);

	/* Motion */
	--bv-motion-fast: 150ms;
	--bv-motion-normal: 250ms;
	--bv-motion-slow: 450ms;
	--bv-easing-standard: cubic-bezier(0.2, 0, 0, 1);
	--bv-easing-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (min-width: 48rem) {
	:root {
		--bv-container-padding: 2rem;
	}
}

@media (min-width: 75rem) {
	:root {
		--bv-container-padding: 3rem;
	}
}