/* ========================================
   4i4A Group - Step 1: Safe Core Foundation
   Gradual Migration - Core Variables Only
   ======================================== */

/* ===== SAFE ADDITIONAL VARIABLES (won't conflict) ===== */
:root {
  /* Utility spacing scale (new, won't conflict) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  
  /* Typography scale (new, won't conflict) */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-lg: 15px;
  --text-xl: 16px;
  --text-2xl: 18px;
  --text-3xl: 22px;
  --text-4xl: 28px;
  --text-5xl: 33px;
  
  /* Font weights (new, won't conflict) */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;
  
  /* Safe utility colors (aliases to existing colors) */
  --util-cyan: var(--electric-cyan, #00ffff);
  --util-green: var(--neon-green, #00ff88);
  --util-yellow: var(--toxic-yellow, #ffff00);
  --util-red: var(--hacker-red, #ff0040);
  --util-white: var(--pure-white, #ffffff);
  --util-blue: var(--light-blue, #cfe3ff);
  --util-muted: var(--muted-blue, #bcd4ff);
}

/* ===== SAFE UTILITY CLASSES (won't conflict with existing) ===== */

/* Spacing utilities (new classes) */
.u-p-xs { padding: var(--space-xs) !important; }
.u-p-sm { padding: var(--space-sm) !important; }
.u-p-md { padding: var(--space-md) !important; }
.u-p-lg { padding: var(--space-lg) !important; }

.u-m-xs { margin: var(--space-xs) !important; }
.u-m-sm { margin: var(--space-sm) !important; }
.u-m-md { margin: var(--space-md) !important; }
.u-m-lg { margin: var(--space-lg) !important; }

.u-gap-xs { gap: var(--space-xs) !important; }
.u-gap-sm { gap: var(--space-sm) !important; }
.u-gap-md { gap: var(--space-md) !important; }
.u-gap-lg { gap: var(--space-lg) !important; }

/* Typography utilities (new classes) */
.u-text-xs { font-size: var(--text-xs) !important; }
.u-text-sm { font-size: var(--text-sm) !important; }
.u-text-lg { font-size: var(--text-lg) !important; }
.u-text-xl { font-size: var(--text-xl) !important; }
.u-text-2xl { font-size: var(--text-2xl) !important; }
.u-text-3xl { font-size: var(--text-3xl) !important; }

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

/* Color utilities (new classes) */
.u-text-cyan { color: var(--util-cyan) !important; }
.u-text-green { color: var(--util-green) !important; }
.u-text-yellow { color: var(--util-yellow) !important; }
.u-text-white { color: var(--util-white) !important; }
.u-text-muted { color: var(--util-muted) !important; }

/* Layout utilities (new classes) */
.u-flex { display: flex !important; }
.u-flex-col { flex-direction: column !important; }
.u-items-center { align-items: center !important; }
.u-justify-center { justify-content: center !important; }
.u-justify-between { justify-content: space-between !important; }
.u-text-center { text-align: center !important; }

/* ===== STEP 1 COMPLETE - SAFE FOUNDATION READY ===== */