/* Landvex Design Tokens v1.0 */
/* Standardized spacing, colors, typography, and border-radius */

:root {
  /* === COLORS === */
  /* Primary Brand */
  --color-primary: #0066FF;
  --color-primary-dark: #0052CC;
  --color-primary-light: #3385FF;
  
  /* Secondary (quiXzoom accent) */
  --color-accent: #FF3366;
  --color-accent-dark: #E62E5C;
  
  /* Neutral */
  --color-black: #0A0A0A;
  --color-dark: #1A1A1A;
  --color-gray-900: #1D1D1F;
  --color-gray-800: #2D2D2F;
  --color-gray-700: #4A4A4A;
  --color-gray-600: #6E6E73;
  --color-gray-500: #8E8E93;
  --color-gray-400: #A1A1A6;
  --color-gray-300: #C7C7CC;
  --color-gray-200: #D1D1D6;
  --color-gray-100: #E5E5EA;
  --color-gray-50: #F2F2F7;
  --color-white: #FFFFFF;
  
  /* Semantic */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;
  
  /* === SPACING === */
  /* Base unit: 4px */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  
  /* === BORDER RADIUS === */
  --radius-none: 0;
  --radius-sm: 6px;    /* Buttons, tags, small elements */
  --radius-md: 10px;   /* Cards, inputs, modals */
  --radius-lg: 16px;   /* Large cards, hero sections */
  --radius-xl: 24px;   /* Feature cards, containers */
  --radius-full: 9999px; /* Pills, avatars, badges */
  
  /* === TYPOGRAPHY === */
  /* Font families */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Helvetica Neue', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  
  /* Font sizes (rem-based) */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */
  
  /* Font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  
  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-glow: 0 0 20px rgba(0, 102, 255, 0.3);
  
  /* === TRANSITIONS === */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  
  /* === Z-INDEX === */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-popover: 400;
  --z-tooltip: 500;
}

/* === UTILITY CLASSES === */
/* Use these instead of inline styles */

/* Border radius utilities */
.rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Spacing utilities (examples) */
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-4 { margin: var(--space-4); }

/* Text utilities */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }

.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

/* Color utilities */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-gray-600); }
.text-muted { color: var(--color-gray-500); }

.bg-primary { background-color: var(--color-primary); }
.bg-dark { background-color: var(--color-dark); }
.bg-light { background-color: var(--color-gray-50); }