@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Roboto+Slab:wght@700&display=swap');

:root {
    /* Colors */
    --blue-50: #E9F0F7;
    --blue-100: #D3E2F0;
    --blue-200: #A7C5E1;
    --blue-300: #7AA7D2;
    --blue-400: #4E8AC3;
    --blue-500: #226DB4;
    --blue-600: #003A81;
    --blue-700: #00074E;
    --blue-800: #00001B;
    --white: #fff;
    --gray-50: #E9E9EA;
    --gray-100: #D3D3D4;
    --gray-200: #A6A7A9;
    --gray-300: #7A7B7F;
    --gray-400: #4D4F54;
    --gray-500: #212329;
    --gray-600: #080A10;
    --light-bg: #F4F7FB;

    /* Font Weights */
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;

    /* Typography */
    --font-size-h1: 46px;
    --line-height-h1: 60px;
    
    --font-size-h2: 40px;
    --line-height-h2: 52px;
    
    --font-size-h3: 28px;
    --line-height-h3: 42px;
    
    --font-size-h4: 24px;
    --line-height-h4: 30px;
    
    --font-size-subtext: 18px;
    --line-height-subtext: 28px;
    
    --font-size-paragraph: 16px;
    --line-height-paragraph: 28px;
    
    --font-size-button: 16px;
    --line-height-button: 16px;

    --font-size-chip: 14px;
    --line-height-chip: 14px;
}

/* Typography Classes */
.font-regular { font-weight: var(--font-regular); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }

.text-h1 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
}
.text-h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
}
.text-h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
}
.text-h4 {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
}
.text-subtext {
    font-size: var(--font-size-subtext);
    line-height: var(--line-height-subtext);
}
.text-paragraph {
    font-size: var(--font-size-paragraph);
    line-height: var(--line-height-paragraph);
}

body {
    font-family: 'Figtree', sans-serif;
    color: var(--gray-600);
    overflow-x: hidden;
    scroll-behavior: smooth;
}
.text-gradient {
    background: linear-gradient(90deg, var(--blue-400), var(--blue-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.glass-nav {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}
/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--gray-50); 
}
::-webkit-scrollbar-thumb {
    background: var(--gray-200); 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--gray-300); 
}

/* Custom UI Elements (Moved from JS Tailwind Config) */
.text-primary { color: var(--blue-600); }
.text-accent { color: var(--blue-400); }
.text-textDark { color: var(--gray-500); }
.text-textGray { color: var(--gray-300); }

.bg-primary { background-color: var(--blue-600); }
.bg-bgLight { background-color: var(--light-bg); }

.hover\:text-primary:hover { color: var(--blue-600); }
.hover\:border-primary:hover { border-color: var(--blue-600); }

.group:hover .group-hover\:text-primary { color: var(--blue-600); }

.shadow-card { box-shadow:none; }
.shadow-card:hover { box-shadow: 0px 18px 50px rgba(33, 35, 41, 0.06); }
/* Property 1=Variant2 */


/* Navigation Links */
.nav-link {
    font-size: var(--font-size-button);
    line-height: var(--line-height-button);
    font-weight: var(--font-medium);
    color: var(--gray-500);
    padding: 0.375rem 0.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    background-color: transparent;
}

.nav-link:hover {
    color: var(--blue-600);
    background-color: var(--blue-50); 
}

/* Buttons */
.btn-primary {
    display: inline-block;
    background-color: var(--blue-500);
    color: var(--white);
    font-size: var(--font-size-button);
    line-height: var(--line-height-button);
    font-weight: var(--font-medium);
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    padding: 0.75rem 1.25rem;
}
.btn-primary:hover {
    background-color: var(--blue-600);
}
.btn-primary-sm {
    padding: 0.75rem 1.25rem;
}
.btn-primary-lg {
    padding: 0.75rem 1.25rem;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--white);
    color: var(--gray-500);
    font-size: var(--font-size-button);
    line-height: var(--line-height-button);
    font-weight: var(--font-medium);
    border: 1px solid var(--gray-500);
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}
.btn-secondary:hover {
    background-color: var(--blue-50);
}
.btn-secondary-sm {
    padding: 0.625rem 1.25rem;
}
.btn-secondary-lg {
    padding: 0.75rem 1.5rem;
}

.btn-mobile {
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--blue-50);
    color: var(--blue-600);
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: var(--font-size-button);
    line-height: var(--line-height-button);
    font-weight: var(--font-medium);
    margin-top: 1rem;
    transition: all 0.3s ease;
}