/* ============================================
   SPEAR Client Design System
   Consistent sizing, spacing, and typography
   ============================================ */

:root {
    /* ===== SPACING SCALE ===== */
    --space-xxs: 0.25rem;   /* 4px */
    --space-xs: 0.375rem;   /* 6px */
    --space-sm: 0.5rem;     /* 8px */
    --space-md: 0.75rem;    /* 12px */
    --space-lg: 1rem;       /* 16px */
    --space-xl: 1.5rem;     /* 24px */
    --space-2xl: 2rem;      /* 32px */
    
    /* ===== FONT SIZES ===== */
    --text-2xs: 0.6rem;     /* 9.6px */
    --text-xs: 0.65rem;     /* 10.4px */
    --text-sm: 0.75rem;     /* 12px */
    --text-base: 0.875rem;  /* 14px */
    --text-lg: 1rem;        /* 16px */
    --text-xl: 1.125rem;    /* 18px */
    --text-2xl: 1.25rem;    /* 20px */
    --text-3xl: 1.5rem;     /* 24px */
    
    /* ===== COMPONENT SIZES ===== */
    --avatar-xs: 1.75rem;   /* 28px */
    --avatar-sm: 2rem;      /* 32px */
    --avatar-md: 2.5rem;    /* 40px */
    --avatar-lg: 3rem;      /* 48px */
    
    --button-padding-xs: 0.3rem 0.6rem;
    --button-padding-sm: 0.4rem 0.8rem;
    --button-padding-md: 0.5rem 1rem;
    --button-padding-lg: 0.75rem 1.5rem;
    
    --input-padding-xs: 0.3rem 0.5rem;
    --input-padding-sm: 0.4rem 0.75rem;
    --input-padding-md: 0.5rem 1rem;
    --input-padding-lg: 0.75rem 1.25rem;
    
    /* ===== BORDER RADIUS ===== */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 50%;
    
    /* ===== SHADOWS ===== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 8px 20px rgba(0, 0, 0, 0.12);
    
    /* ===== COLORS ===== */
    --color-primary: #1e5631;
    --color-primary-light: #2a7a45;
    --color-primary-dark: #1a4a2a;
    
    --color-secondary: #667eea;
    --color-secondary-dark: #764ba2;
    
    --color-success: #22543d;
    --color-success-light: #c6f6d5;
    
    --color-info: #4299e1;
    --color-info-light: #ebf8ff;
    
    --color-warning: #d69e2e;
    --color-warning-light: #fef5e7;
    
    --color-danger: #c53030;
    --color-danger-light: #fed7d7;
    
    /* ===== NEUTRAL COLORS ===== */
    --color-gray-50: #f7fafc;
    --color-gray-100: #f0f4f8;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e0;
    --color-gray-400: #a0aec0;
    --color-gray-500: #718096;
    --color-gray-600: #4a5568;
    --color-gray-700: #2d3748;
    --color-gray-800: #1a202c;
    --color-gray-900: #171923;
    
    /* ===== TRANSITIONS ===== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* ===== Z-INDEX SCALE ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ===== UTILITY CLASSES ===== */

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

.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }

.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

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

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

/* Text utilities */
.text-2xs { font-size: var(--text-2xs); }
.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-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Border radius utilities */
.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); }

/* Shadow utilities */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Color utilities */
.text-gray-400 { color: var(--color-gray-400); }
.text-gray-500 { color: var(--color-gray-500); }
.text-gray-600 { color: var(--color-gray-600); }
.text-gray-700 { color: var(--color-gray-700); }
.text-gray-800 { color: var(--color-gray-800); }

.bg-gray-50 { background-color: var(--color-gray-50); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-white { background-color: white; }

/* Transition utilities */
.transition-fast { transition: all var(--transition-fast); }
.transition-base { transition: all var(--transition-base); }
.transition-slow { transition: all var(--transition-slow); }