/**
 * Nikolas X — Design tokens
 * Phase 1. Source of truth for colors, type, space, radius, shadows, breakpoints.
 */

:root {
	/* —— Colors (approved mockup) —— */
	--nx-color-dark: #05070d;
	--nx-color-dark-secondary: #0b1020;
	--nx-color-primary: #4f46ff;
	--nx-color-primary-hover: #4338e8;
	--nx-color-purple: #7c3aed;
	--nx-color-white: #ffffff;
	--nx-color-light: #f7f8fc;
	--nx-color-text: #111827;
	--nx-color-text-inverse: #f9fafb;
	--nx-color-muted: #6b7280;
	--nx-color-border: #e5e7eb;
	--nx-color-border-dark: rgba(255, 255, 255, 0.12);
	--nx-color-focus: #4f46ff;
	--nx-color-success: #059669;
	--nx-color-warning: #d97706;
	--nx-color-danger: #dc2626;

	/* Gradients — use sparingly */
	--nx-gradient-brand: linear-gradient(135deg, #4f46ff 0%, #7c3aed 100%);
	--nx-gradient-dark: linear-gradient(180deg, #0b1020 0%, #05070d 100%);

	/* —— Typography (local/system; no Google Fonts request) —— */
	--nx-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--nx-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	--nx-fs-display: clamp(2.5rem, 1.8rem + 2.5vw, 3.75rem);
	--nx-fs-h1: clamp(2rem, 1.6rem + 1.5vw, 3rem);
	--nx-fs-h2: clamp(1.5rem, 1.3rem + 0.9vw, 2.25rem);
	--nx-fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
	--nx-fs-h4: 1.125rem;
	--nx-fs-body: 1rem;
	--nx-fs-body-lg: 1.125rem;
	--nx-fs-small: 0.875rem;
	--nx-fs-label: 0.8125rem;
	--nx-fs-meta: 0.75rem;

	--nx-fw-regular: 400;
	--nx-fw-medium: 500;
	--nx-fw-semibold: 600;
	--nx-fw-bold: 700;

	--nx-lh-tight: 1.15;
	--nx-lh-snug: 1.3;
	--nx-lh-body: 1.6;
	--nx-lh-relaxed: 1.75;

	--nx-tracking-tight: -0.02em;
	--nx-tracking-normal: 0;
	--nx-tracking-wide: 0.04em;
	--nx-tracking-eyebrow: 0.12em;

	/* —— Spacing (8px system) —— */
	--nx-space-1: 0.25rem; /* 4 */
	--nx-space-2: 0.5rem; /* 8 */
	--nx-space-3: 0.75rem; /* 12 */
	--nx-space-4: 1rem; /* 16 */
	--nx-space-5: 1.5rem; /* 24 */
	--nx-space-6: 2rem; /* 32 */
	--nx-space-7: 2.5rem; /* 40 */
	--nx-space-8: 3rem; /* 48 */
	--nx-space-9: 4rem; /* 64 */
	--nx-space-10: 5rem; /* 80 */
	--nx-space-11: 6rem; /* 96 */
	--nx-space-12: 8rem; /* 128 */

	/* Legacy alias used in Phase 0 chrome */
	--nx-space: var(--nx-space-2);

	/* —— Layout —— */
	--nx-container: 72.5rem; /* 1160 */
	--nx-container-narrow: 42rem;
	--nx-container-wide: 80rem;
	--nx-gutter: var(--nx-space-5);
	--nx-section-y: var(--nx-space-10);
	--nx-section-y-sm: var(--nx-space-8);

	/* —— Radius —— */
	--nx-radius-sm: 0.5rem; /* 8 */
	--nx-radius: 0.75rem; /* 12 */
	--nx-radius-md: 1rem; /* 16 */
	--nx-radius-lg: 1.25rem; /* 20 */
	--nx-radius-pill: 999px;

	/* —— Borders & shadows (restrained) —— */
	--nx-border-width: 1px;
	--nx-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
	--nx-shadow: 0 4px 16px rgba(17, 24, 39, 0.06);
	--nx-shadow-md: 0 8px 24px rgba(17, 24, 39, 0.08);
	--nx-shadow-focus: 0 0 0 3px rgba(79, 70, 255, 0.35);

	/* —— Motion —— */
	--nx-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--nx-duration-fast: 150ms;
	--nx-duration: 220ms;
	--nx-duration-slow: 360ms;

	/* —— Breakpoints (reference; media queries use literal values) —— */
	--nx-bp-sm: 480px;
	--nx-bp-md: 768px;
	--nx-bp-lg: 1024px;
	--nx-bp-xl: 1280px;

	/* —— Z-index —— */
	--nx-z-dropdown: 100;
	--nx-z-sticky: 200;
	--nx-z-overlay: 300;
	--nx-z-modal: 400;
	--nx-z-skip: 100000;

	/* —— Controls —— */
	--nx-control-h: 2.75rem;
	--nx-control-h-sm: 2.25rem;
	--nx-control-h-lg: 3.25rem;
}