:root {

    /* mobile breakpoint : 639px; */
    
    --nav-height: 3rem;
    --error-height: 21px;

    --radius-1: 0.25rem;
    --radius-2: 0.5rem;
    --radius-3: 0.75rem;
    --radius-4: 1rem;
    --radius-full: 9999px;

    --space-1: 0.25rem;   /* 4px  - tight gaps, small padding */
    --space-2: 0.5rem;    /* 8px  - comfortable padding */
    --space-4: 1rem;      /* 16px - standard spacing */
    --space-8: 2rem;      /* 32px - generous spacing */
    --space-12: 3rem;     /* 48px - section spacing */
    --space-16: 4rem;     /* 64px - large margins */

    --text-sm: 0.875rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;

    --leading-lg: 1.75rem; 
    --leading-xl: 1.75rem; 
    --leading-2xl: 2rem; 
    --leading-3xl: 2.25rem;

    --color-white: #ffffff;
    --color-black: #000000;

    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #6B7280;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;

    --color-red-100: #FEE2E2;
    --color-red-200: #FECACA;
    --color-red-300: #FCA5A5;
    --color-red-400: #F87171;
    --color-red-500: #EF4444;
    --color-red-600: #DC2626;
    --color-red-700: #B91C1C;
    --color-red-800: #991B1B;
    --color-red-900: #7F1D1D;

    --color-blue-100: #DBEAFE;
    --color-blue-200: #BFDBFE;
    --color-blue-300: #93C5FD;
    --color-blue-400: #60A5FA;
    --color-blue-500: #3B82F6;
    --color-blue-600: #2563EB;
    --color-blue-700: #1D4ED8;
    --color-blue-800: #1E40AF;
    --color-blue-900: #1E3A8A;

    --color-green-50: #ECFDF5; 
    --color-green-100: #D1FAE5; 
    --color-green-200: #A7F3D0; 
    --color-green-300: #6EE7B7; 
    --color-green-400: #34D399; 
    --color-green-500: #10B981; 
    --color-green-600: #059669; 
    --color-green-700: #047857; 
    --color-green-800: #065F46; 
    --color-green-900: #064E3B; 


}