/**
 * ATEQ design tokens — Figma "Foundations" (node 4-86), Light mode only.
 * Letter-spacing: Figma percentages converted to em (30% → 0.3em).
 */

:root {

	/* Primitives — ATEQ Red */
	--red-50: #fdecf0;
	--red-100: #fbd0da;
	--red-200: #f6a1b5;
	--red-300: #f06a8a;
	--red-400: #ea194a;
	--red-500: #d31245;
	--red-600: #c40d3f;
	--red-700: #a80533;
	--red-800: #7a0326;
	--red-900: #4a0217;

	/* Primitives — Neutral (Graphite) */
	--neutral-0: #fff;
	--neutral-50: #f6f6f7;
	--neutral-100: #ededef;
	--neutral-200: #dcdce0;
	--neutral-300: #c4c4ca;
	--neutral-400: #9a9aa2;
	--neutral-500: #6e6e77;
	--neutral-600: #4e4e56;
	--neutral-700: #34343a;
	--neutral-800: #222226;
	--neutral-900: #16161a;
	--neutral-950: #0c0c0e;

	/* Primitives — Feedback */
	--success: #1f9d55;
	--warning: #e0a100;
	--info: #2563eb;

	/* Semantic tokens (Light) */
	--bg-page: var(--neutral-0);
	--bg-subtle: var(--neutral-50);
	--bg-inverse: var(--neutral-950);
	--bg-accent: var(--red-500);
	--bg-accent-hover: var(--red-600);
	--bg-accent-soft: var(--red-50);

	/* Bright red: large accents only (pins, big figures, graphics),
	   never small text */
	--accent-bright: var(--red-400);
	--bg-elevated: var(--neutral-0);
	--text-primary: var(--neutral-950);
	--text-secondary: var(--neutral-500);
	--text-muted: var(--neutral-400);
	--text-accent: var(--red-500);
	--text-accent-inverse: var(--red-300); /* small red text on black: 6.6:1 (red/500: 3.7:1) */
	--text-inverse: var(--neutral-0);
	--icon-inverse: var(--neutral-0);
	--border-default: var(--neutral-200);
	--border-strong: var(--neutral-950);

	/* Font families */
	--font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-heading: "Barlow Condensed", "Arial Narrow", sans-serif;

	/* Text styles — Display / Heading (Barlow Condensed) */
	--display-xl-size: 120px;
	--display-xl-weight: 700;
	--display-xl-line: 1;
	--display-xl-tracking: -0.01em;

	--display-l-size: 88px;
	--display-l-weight: 700;
	--display-l-line: 0.95;
	--display-l-tracking: -0.005em;

	--h1-size: 64px;
	--h1-weight: 700;
	--h1-line: 1;

	--h2-size: 48px;
	--h2-weight: 700;
	--h2-line: 1.05;

	--h3-size: 32px;
	--h3-weight: 600;
	--h3-line: 1.15;

	--h4-size: 24px;
	--h4-weight: 600;
	--h4-line: 1.2;

	--number-section-size: 80px;
	--number-section-weight: 300;
	--number-section-line: 1;

	/* Text styles — Labels / Body (Barlow) */
	--eyebrow-size: 13px;
	--eyebrow-weight: 600;
	--eyebrow-line: 1.4;
	--eyebrow-tracking: 0.3em;

	--button-size: 14px;
	--button-weight: 600;
	--button-line: 1;
	--button-tracking: 0.15em;

	--nav-size: 15px;
	--nav-weight: 500;
	--nav-line: 1;
	--nav-tracking: 0.06em;

	--body-l-size: 20px;
	--body-l-line: 1.6;

	--body-m-size: 16px;
	--body-m-line: 1.6;

	--body-s-size: 14px;
	--body-s-line: 1.5;

	--caption-size: 12px;
	--caption-weight: 500;
	--caption-line: 1.4;
	--caption-tracking: 0.04em;

	/* Spacing scale (px) */
	--space-4: 4px;
	--space-8: 8px;
	--space-12: 12px;
	--space-16: 16px;
	--space-24: 24px;
	--space-32: 32px;
	--space-48: 48px;
	--space-64: 64px;
	--space-96: 96px;
	--space-128: 128px;

	/* Radii */
	--radius-none: 0;
	--radius-xs: 2px;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-full: 999px;

	/* Elevation */
	--shadow-card: 0 8px 24px 0 rgb(13 13 15 / 8%);
	--shadow-hover: 0 20px 48px 0 rgb(13 13 15 / 16%);

	/* Layout */
	--container: 1280px;
	--gutter: 20px;
	--header-height: 64px;

	/* Motion */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--duration-fast: 200ms;
	--duration-base: 300ms;
}

@media (min-width: 768px) {

	:root {
		--gutter: 40px;
		--header-height: 96px;
	}
}

@media (min-width: 1280px) {

	:root {
		--gutter: 80px;
	}
}