/**
 * Design Tokens
 * CSS-first source of truth for colors, typography, spacing, and system primitives.
 * Map Elementor Global Colors/Fonts to these tokens for consistency.
 * Version: 0.1.1
 */

:root {
	/* ============================================
     COLOR TOKENS
     ============================================ */

	/* Brand palette */
	--color-brand-50: #f0f9ff;
	--color-brand-100: #e0f2fe;
	--color-brand-200: #bae6fd;
	--color-brand-300: #7dd3fc;
	--color-brand-400: #38bdf8;
	--color-brand-500: #0ea5e9;
	--color-brand-600: #0284c7;
	--color-brand-700: #0369a1;
	--color-brand-800: #075985;
	--color-brand-900: #0c4a6e;

	/* Neutral palette */
	--color-neutral-50: #fafafa;
	--color-neutral-100: #f5f5f5;
	--color-neutral-200: #e5e5e5;
	--color-neutral-300: #d4d4d4;
	--color-neutral-400: #a3a3a3;
	--color-neutral-500: #737373;
	--color-neutral-600: #525252;
	--color-neutral-700: #404040;
	--color-neutral-800: #262626;
	--color-neutral-900: #171717;

	/* Semantic colors */
	--color-success: #10b981;
	--color-warning: #f59e0b;
	--color-error: #ef4444;
	--color-info: #3b82f6;
	--color-white: #ffffff;
	--color-black: #000000;

	/* Semantic aliases (map to Elementor Global Colors) */
	--color-primary: #384e9e;
	--color-secondary: #d7eff5;
	--color-text: var(--color-neutral-900);
	--color-text-muted: var(--color-neutral-600);
	--color-accent: var(--color-brand-500);
	--color-surface: var(--color-neutral-50);
	--color-background: #ffffff;
	--color-border: var(--color-neutral-200);
	--color-primary-dark: var(--color-brand-800);

	/* ============================================
     TYPOGRAPHY TOKENS
     ============================================ */

	/* Font families */
	--font-primary:
		"aptos", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--font-secondary:
		"benton-modern-display", Georgia, "Times New Roman", serif;
	--font-mono:
		"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;

	/* Font weights */
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;

	/* Font sizes - fluid/responsive using clamp() */
	--font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); /* 12-14px */
	--font-size-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem); /* 14-16px */
	--font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16-18px */
	--font-size-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem); /* 18-20px */
	--font-size-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* 20-24px */
	--font-size-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem); /* 24-30px */
	--font-size-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem); /* 30-36px */
	--font-size-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem); /* 36-48px */
	--font-size-5xl: clamp(3rem, 2.5rem + 2.5vw, 3.75rem); /* 48-60px */
	--font-size-6xl: clamp(3.75rem, 3rem + 3.75vw, 4.5rem); /* 60-72px */

	/* Line heights */
	--line-height-tight: 1.25;
	--line-height-snug: 1.375;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.625;
	--line-height-loose: 2;

	/* Letter spacing */
	--letter-spacing-tight: -0.025em;
	--letter-spacing-normal: 0;
	--letter-spacing-wide: 0.025em;
	--letter-spacing-wider: 0.05em;
	--letter-spacing-widest: 0.1em;

	/* ============================================
     SPACING TOKENS
     ============================================ */

	/* Base spacing scale (8px base) */
	--space-0: 0;
	--space-1: 0.25rem; /* 4px */
	--space-2: 0.5rem; /* 8px */
	--space-3: 0.75rem; /* 12px */
	--space-4: 1rem; /* 16px */
	--space-5: 1.25rem; /* 20px */
	--space-6: 1.5rem; /* 24px */
	--space-8: 2rem; /* 32px */
	--space-10: 2.5rem; /* 40px */
	--space-12: 3rem; /* 48px */
	--space-16: 4rem; /* 64px */
	--space-20: 5rem; /* 80px */
	--space-24: 6rem; /* 96px */
	--space-32: 8rem; /* 128px */
	--space-40: 10rem; /* 160px */
	--space-48: 12rem; /* 192px */
	--space-56: 14rem; /* 224px */
	--space-64: 16rem; /* 256px */

	/* Semantic spacing aliases */
	--space-xs: var(--space-2);
	--space-sm: var(--space-4);
	--space-md: var(--space-6);
	--space-lg: var(--space-8);
	--space-xl: var(--space-12);
	--space-2xl: var(--space-16);
	--space-3xl: var(--space-24);

	/* ============================================
     LAYOUT TOKENS
     ============================================ */

	/* Container widths */
	--container-sm: 640px;
	--container-md: 768px;
	--container-lg: 1024px;
	--container-xl: 1280px;
	--container-2xl: 1536px;

	/* Breakpoints (for reference in media queries) */
	--breakpoint-sm: 640px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 1024px;
	--breakpoint-xl: 1280px;
	--breakpoint-2xl: 1536px;

	/* ============================================
     BORDER & RADIUS TOKENS
     ============================================ */

	/* Border widths */
	--border-width-0: 0;
	--border-width-1: 1px;
	--border-width-2: 2px;
	--border-width-4: 4px;
	--border-width-8: 8px;

	/* Border radius */
	--radius-none: 0;
	--radius-sm: 0.125rem; /* 2px */
	--radius-base: 0.25rem; /* 4px */
	--radius-md: 0.375rem; /* 6px */
	--radius-lg: 0.5rem; /* 8px */
	--radius-xl: 0.75rem; /* 12px */
	--radius-2xl: 1rem; /* 16px */
	--radius-3xl: 1.5rem; /* 24px */
	--radius-full: 9999px;

	/* ============================================
     SHADOW TOKENS
     ============================================ */

	--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--shadow-base:
		0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-md:
		0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--shadow-lg:
		0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
	--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
	--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

	/* ============================================
     Z-INDEX TOKENS
     ============================================ */

	--z-base: 0;
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-fixed: 1030;
	--z-modal-backdrop: 1040;
	--z-modal: 1050;
	--z-popover: 1060;
	--z-tooltip: 1070;

	/* ============================================
     TRANSITION TOKENS
     ============================================ */

	--transition-fast: 150ms ease-in-out;
	--transition-base: 250ms ease-in-out;
	--transition-slow: 350ms ease-in-out;
	--transition-slower: 500ms ease-in-out;

	/* Easing curves */
	--ease-in: cubic-bezier(0.4, 0, 1, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

	/* ============================================
     FOCUS & INTERACTION TOKENS
     ============================================ */

	--focus-ring-width: 2px;
	--focus-ring-offset: 2px;
	--focus-ring-color: var(--color-brand-500);
	--focus-ring:
		0 0 0 var(--focus-ring-offset) var(--color-background),
		0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width))
			var(--focus-ring-color);

	/* ============================================
     NAVIGATION TOKENS
     ============================================ */

	/* Navigation hover circle effect */
	--nav-circle-size: 30px;
	--nav-circle-offset: -17px; /* Half of size + 2px for edge positioning */
	--nav-circle-color: rgba(215, 239, 245, 1);
	--nav-circle-transition: opacity 0.3s ease;

	/* Navigation specific tokens */
	--nav-width-mobile: 420px;
	--nav-hover-bg: rgba(255, 255, 255, 0.1);
	--nav-divider: rgba(255, 255, 255, 0.1);
	--overlay-bg: rgba(0, 0, 0, 0.5);
	--overlay-max-width: 700px;
	--logo-max-height: 80px;
}

/* ============================================
   ELEMENTOR KIT BRIDGE
   Map Elementor Global Colors/Fonts to tokens
   ============================================ */

.elementor-kit-10 {
	/* Global colors - bridge to Elementor */
	--e-global-color-primary: var(--color-primary);
	--e-global-color-secondary: var(--color-secondary);
	--e-global-color-text: var(--color-text);
	--e-global-color-accent: var(--color-accent);

	/* Global fonts - bridge to Elementor */
	--e-global-typography-primary-font-family: var(--font-primary);
	--e-global-typography-secondary-font-family: var(--font-secondary);
	--e-global-typography-text-font-family: var(--font-primary);
	--e-global-typography-accent-font-family: var(--font-primary);
}