:root {
    /* Global Font Family */
    --font-sans: 'Instrument Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Global Font Sizes */
    --text-heading: 2.75rem;     /* 44px for main headings */
    --text-subheading: 1.25rem;  /* 20px for sub-headings / brand titles */
    --text-normal: 1rem;         /* 16px for body / regular text */
    --text-small: 0.875rem;      /* 14px for captions / descriptions / footer text */

    /* Global Colors */
    --color-bg-main: #ffffff;      /* Main page background */
    --color-bg-dark: #1f2937;      /* Dark containers: header, footer, hero start */
    --color-bg-darker: #111827;    /* Gradient end / dark background */
    --color-bg-card: #374151;      /* Secondary dark / border accent */
    --color-primary: #2563eb;      /* Primary action button */
    --color-primary-hover: #1d4ed8;/* Primary hover */
    --color-secondary: #374151;    /* Secondary action button */
    --color-secondary-hover: #4b5563; /* Secondary hover */
    --color-text-light: #ffffff;   /* Pure white text */
    --color-text-dark: #1f2937;    /* Dark body text */
    --color-text-muted: #d1d5db;   /* Muted nav links */
    --color-text-subtle: #9ca3af;  /* Subtle captions / descriptions */
    --color-border-dark: #374151;  /* Dark section dividers */
    
    /* Hero section specific */
    --color-cyan-accent: #00f2fe;  /* Cyan highlight */
    --color-hero-btn-bg: #00a4ba;   /* Cyan button bg */
    --color-hero-btn-hover: #008fa3;
    
    --color-bg: #f0f7ff;          
    --color-text-brand-dark: #203374; /* Brand dark blue text */
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg-main);
    color: var(--color-text-dark);
    font-size: var(--text-normal);
}

/* Global Typography Utility Classes */
.text-heading {
    font-family: var(--font-sans);
    font-size: var(--text-heading);
}

.text-subheading {
    font-family: var(--font-sans);
    font-size: var(--text-subheading);
}

.text-normal {
    font-family: var(--font-sans);
    font-size: var(--text-normal);
}

.text-small {
    font-family: var(--font-sans);
    font-size: var(--text-small);
}

.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 999px;
}

.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #9ca3af transparent;
}

html {
    scroll-behavior: smooth;
}