/**
 * Critical CSS - Loaded inline for instant first paint
 * These styles are needed before React renders
 * 
 * PERFORMANCE: This file is small (~2KB) and loads before the main bundle
 */

/* Base Reset & Font */
*, *::before, *::after { box-sizing: border-box; }
body {
    font-family: 'Hanken Grotesk', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f7f7f7;
}

/* Core Design System Colors (sqNew) */
:root {
    --sqNewPurple: #4e61d6;
    --sqNewBlack: #0a0d12;
    --sqNewWhite: #ffffff;
    --sqNewGrey-50: #f7f7f7;
    --sqNewGrey-100: #f0f2f5;
    --sqNewGrey-200: #d0d6de;
    --sqNewGrey-300: #a2aab8;
    --sqNewGrey-500: #646e81;
    --sqNewGrey-600: #29303d;
    --sqNewGrey-700: #161f31;
    --sqNewGrey-800: #0a0d12;
}

/* Critical Flexbox Utilities */
.d-flex { display: flex !important; }
.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.align-items-center { align-items: center !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.h-100 { height: 100% !important; }
.w-100 { width: 100% !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-5 { gap: 1.25rem !important; }
.gap-6 { gap: 1.5rem !important; }
.gap-8 { gap: 2rem !important; }
.text-center { text-align: center !important; }

/* Critical Color Classes */
.bg-sqNewWhite { background-color: #ffffff !important; }
.text-sqNewBlack { color: #0a0d12 !important; }
.text-sqNewGrey-500 { color: #646e81 !important; }

/* Critical Typography */
.text-h4-700 { font-size: 2.25rem; line-height: 120%; font-weight: 700; }
.text-h5-700 { font-size: 1.5rem; line-height: 150%; font-weight: 700; }
.text-p-small-500 { font-size: 0.875rem; line-height: 150%; font-weight: 500; }
.text-p-small-400 { font-size: 0.875rem; line-height: 150%; font-weight: 400; }

/* Critical Border Radius */
.rounded-4xl { border-radius: 1.5rem !important; }

/* Critical Shadow */
.shadow-3xl { box-shadow: 0rem 2rem 4rem -0.75rem rgba(10, 13, 18, 0.14); }

/* Hide scrollbar */
body::-webkit-scrollbar { display: none; }

/* Input focus */
input:focus { outline: none; }