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

/* Shared design language: use these variables for all future page and component work. */
:root {
    --font-body: "Inter", "Segoe UI", Arial, sans-serif;
    --font-heading: "Plus Jakarta Sans", "Inter", "Segoe UI", Arial, sans-serif;
    --color-brand: #0b3f7a;
    --color-brand-strong: #082e5b;
    --color-accent: #1266d6;
    --color-accent-soft: #eaf3ff;
    --color-ink: #142b4b;
    --color-muted: #60708a;
    --color-surface: #ffffff;
    --color-surface-soft: #f6f9fd;
    --color-line: #dbe5f1;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 6px 20px rgba(12, 47, 88, .07);
    --shadow-md: 0 15px 36px rgba(12, 47, 88, .12);
    --space-1: .5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    /* Shared responsive tiers: mobile ≤767.98px, tablet 768–991.98px, desktop ≥992px. */
    --breakpoint-mobile-max: 767.98px;
    --breakpoint-tablet-min: 768px;
    --breakpoint-tablet-max: 991.98px;
    --breakpoint-desktop-min: 992px;
    --primary: var(--color-brand);
    --secondary: var(--color-brand-strong);
    --text: var(--color-muted);
    --border: var(--color-line);
    --light: var(--color-surface-soft);
}

html { font-family: var(--font-body); }
body, button, input, select, textarea { font-family: var(--font-body); color: var(--color-ink); }
h1, h2, h3, h4, h5, h6, .navbar .nav-link, .navbar-brand, .topbar, .button, .btn, .section-title, .eyebrow { font-family: var(--font-heading); }
p, li, label, input, select, textarea { font-family: var(--font-body); }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(18, 102, 214, .32); outline-offset: 3px; }
.topbar { background-color: var(--color-brand-strong); }
.navbar { border-color: var(--color-line); }
.navbar .nav-link.active, .navbar .nav-link:hover { color: var(--color-accent) !important; }
.footer { background-color: var(--color-brand-strong); }