/* Font loading moved to HTML head for better performance - see index.blade.php */

:root {
    --font-family: "DM Sans", sans-serif;
    --second-family: "Manrope", sans-serif;
    --color-text-text-50: #f5f7ff;
    --color-text-text-400: #5a6b98;
    --color-text-text-700: #1b2c51;
    --color-neutral-neutral-50: #f9fafb;
    --color-neutral-neutral-100: #f3f4f6;
    --color-neutral-neutral-200: #e5e7eb;
    --color-neutral-neutral-300: #d1d5db;
    --color-neutral-neutral-400: #9ca3af;
    --color-neutral-neutral-500: #6b7280;
    --color-neutral-neutral-600: #4b5563;
    --color-neutral-neutral-700: #374151;
    --color-neutral-neutral-800: #1f2937;
    --color-neutral-neutral-900: #111827;
    --color-neutral-neutral-950: #0b0f19;
    --color-primary-primary-100: #dce3ff;
    --color-primary-primary-200: #b5c6ff;
    --color-primary-primary-300: #8ca9ff;
    --color-primary-primary-400: #5c86ff;
    --color-primary-primary-500: #1b43fe;
    --color-primary-primary-600: #1639e0;
    --color-primary-primary-700: #102fb7;
    --color-text-text-950: #101a34;
    --color-secondary-secondary-100: #f8cfcf;
    --color-secondary-secondary-200: #f3aaaa;
    --color-secondary-secondary-300: #ec7f7f;
    --color-secondary-secondary-400: #e35353;
    --color-secondary-secondary-500: #b5121b;
    --color-secondary-secondary-600: #9a1017;
    --color-secondary-secondary-700: #7f0d13;
    --color-state-success-500: #22c55e;
    --color-state-warning-500: #f59e0b;
    --color-state-error-500: #ef4444;
    --color-state-info-500: #3b82f6;
    --color-primary-primary-800: #0c268e;
    --color-primary-primary-900: #081c66;
    --color-primary-primary-950: #050f3d;
    --color-primary-primary-50: #f0f3ff;
    --color-secondary-secondary-800: #660b0f;
    --color-secondary-secondary-900: #4d080b;
    --color-secondary-secondary-950: #2f0405;
    --color-secondary-secondary-50: #fceaea;
}

/* Font display optimization - Google Fonts already includes display=swap */
/* Additional font loading optimizations */
body {
    font-family: var(--font-family);
    /* Reserve space for fonts to prevent layout shift */
    font-size-adjust: 0.5;
    /* Prevent font-related layout shifts */
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--second-family);
    /* Reserve space for headings */
    font-size-adjust: 0.5;
    /* Prevent font-related layout shifts */
    text-rendering: optimizeLegibility;
}

p {
    font-family: var(--font-family);
}

a {
    font-family: var(--font-family);
}

.bold {
    font-weight: 700;
}

.semibold {
    font-weight: 600;
}

.medium {
    font-weight: 500;
}

.regular {
    font-weight: 400;
}

.primary {
    color: var(--color-primary-primary-500);
}

.border-radius-full {
    border-radius: 100%;
}

.border-radius-50 {
    border-radius: 50%;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-justify {
    text-align: justify;
}

/* Button contrast fixes for WCAG compliance */
.btn-primary {
    background-color: var(--color-primary-primary-500, #1b43fe);
    border-color: var(--color-primary-primary-500, #1b43fe);
    color: #ffffff !important; /* Ensure sufficient contrast - WCAG AA compliant (4.5:1 ratio) */
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-primary-600, #1639e0);
    border-color: var(--color-primary-primary-600, #1639e0);
    color: #ffffff !important; /* Maintain contrast on hover */
}

.btn-primary:active,
.btn-primary.active {
    background-color: var(--color-primary-primary-700, #102fb7);
    border-color: var(--color-primary-primary-700, #102fb7);
    color: #ffffff !important; /* Maintain contrast when active */
}