/**
 * Design Tokens for Eryvium Theme
 * Design system tokens for colors, typography, spacing, and more
 */

:root {
	/* ============================================
	   COLOR TOKENS
	   ============================================ */
	
	/* Primary Colors */
	--color-sky-pulse: #07B3F1;
	--color-night-core: #1F1F1F;
	--color-steel-mist: #4F6478;
	--color-frost-veil: #DDE3EA;
	--color-deep-navy-forge: #2A3347;
	--color-verdant-signal: #128C70;
	--color-silver-neutral: #A6A6A6;
	--color-pure-white: #FFFFFF;
	--color-true-black: #000000;
	--color-glass-blue: rgba(116, 154, 219, 0.1); /* #749ADB 10% */
	
	/* Semantic Color Mappings */
	--color-primary: var(--color-sky-pulse);
	--color-secondary: var(--color-verdant-signal);
	--color-text-primary: var(--color-night-core);
	--color-text-secondary: var(--color-steel-mist);
	--color-text-muted: var(--color-silver-neutral);
	--color-background: var(--color-pure-white);
	--color-background-alt: var(--color-frost-veil);
	--color-border: var(--color-frost-veil);
	--color-border-dark: var(--color-steel-mist);
	
	/* ============================================
	   TYPOGRAPHY TOKENS
	   ============================================ */
	
	/* Font Families */
	--font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	
	/* Font Weights */
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	
	/* Heading Typography - Using clamp() for responsive scaling */
	--font-size-h1: clamp(2.5rem, 5vw + 1rem, 4.375rem); /* 40px - 70px */
	--line-height-h1: clamp(3rem, 5vw + 1.5rem, 5rem); /* 48px - 80px */
	--font-weight-h1: var(--font-weight-medium);
	--font-family-h1: var(--font-heading);
	
	--font-size-h2: clamp(2rem, 4vw + 1rem, 3.375rem); /* 32px - 54px */
	--line-height-h2: clamp(2.5rem, 4vw + 1.5rem, 4.25rem); /* 40px - 68px */
	--font-weight-h2: var(--font-weight-medium);
	--font-family-h2: var(--font-heading);
	
	--font-size-h3: clamp(1.125rem, 1.5vw + 0.5rem, 1.25rem); /* 18px - 20px */
	--line-height-h3: clamp(1.5rem, 2vw + 0.75rem, 1.875rem); /* 24px - 30px */
	--font-weight-h3: var(--font-weight-regular);
	--font-family-h3: var(--font-body);
	
	/* Body Typography */
	--font-size-body: clamp(0.875rem, 1vw + 0.5rem, 1rem); /* 14px - 16px */
	--line-height-body: clamp(1.25rem, 1.5vw + 0.75rem, 1.5rem); /* 20px - 24px */
	--font-weight-body: var(--font-weight-regular);
	--font-family-body: var(--font-body);
	
	/* Small Text */
	--font-size-small: clamp(0.75rem, 0.8vw + 0.4rem, 0.875rem); /* 12px - 14px */
	--line-height-small: clamp(1rem, 1.2vw + 0.5rem, 1.25rem); /* 16px - 20px */
	
	/* ============================================
	   SPACING TOKENS
	   ============================================ */
	
	--spacing-xs: clamp(0.25rem, 0.5vw, 0.5rem); /* 4px - 8px */
	--spacing-sm: clamp(0.5rem, 1vw, 0.75rem); /* 8px - 12px */
	--spacing-md: clamp(0.75rem, 1.5vw, 1rem); /* 12px - 16px */
	--spacing-lg: clamp(1rem, 2vw, 1.5rem); /* 16px - 24px */
	--spacing-xl: clamp(1.5rem, 3vw, 2rem); /* 24px - 32px */
	--spacing-2xl: clamp(2rem, 4vw, 3rem); /* 32px - 48px */
	--spacing-3xl: clamp(3rem, 6vw, 4rem); /* 48px - 64px */
	--spacing-4xl: clamp(4rem, 8vw, 6rem); /* 64px - 96px */
	
	/* Specific padding tokens */
	--padding-8: 8px;
	--padding-24: 24px;
	--padding-32: 32px;
	--padding-44: 44px;
	
	/* ============================================
	   LAYOUT TOKENS
	   ============================================ */
	
	--container-max-width: clamp(320px, 90vw, 1300px);
	--container-padding: clamp(1.25rem, 3vw, 2rem); /* 20px - 32px (increased minimum for better spacing) */
	--border-radius-sm: clamp(0.25rem, 0.5vw, 0.5rem); /* 4px - 8px */
	--border-radius-md: clamp(0.5rem, 1vw, 0.75rem); /* 8px - 12px */
	--border-radius-lg: clamp(0.75rem, 1.5vw, 1rem); /* 12px - 16px */
	--border-radius-full: 9999px;
	
	/* ============================================
	   SHADOW TOKENS
	   ============================================ */
	
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	
	/* ============================================
	   TRANSITION TOKENS
	   ============================================ */
	
	--transition-fast: 150ms ease-in-out;
	--transition-base: 300ms ease-in-out;
	--transition-slow: 500ms ease-in-out;
	
	/* ============================================
	   Z-INDEX TOKENS
	   ============================================ */
	
	--z-index-dropdown: 1000;
	--z-index-sticky: 1020;
	--z-index-fixed: 1030;
	--z-index-modal-backdrop: 1040;
	--z-index-modal: 1050;
	--z-index-popover: 1060;
	--z-index-tooltip: 1070;
}

/* Dark mode support (optional, can be enabled later) */
/* @media (prefers-color-scheme: dark) {
	:root {
		Dark mode color overrides can be added here
	}
} */