:root {
    --primary: #0A2661;
    --primary-dark: #061A43;
    --secondary: #103A84;
    --accent: #43E0D0;
    --interactive: #20B862;
    --interactive-dark: #148246;
    --star: #F7C948;
    --heading: #111827;
    --text: #243041;
    --text-muted: #5E6A7A;
    --surface: #FFFFFF;
    --surface-alt: #F3F7FB;
    --surface-dark: #0A2661;
    --on-surface: #243041;
    --on-surface-alt: #243041;
    --on-dark: #FFFFFF;
    --on-primary: #FFFFFF;
    --font-heading: Arial, Helvetica, sans-serif;
    --font-body: Arial, Helvetica, sans-serif;
}

body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--surface);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--heading);
}

a {
    color: var(--primary);
}

a:hover {
    color: var(--interactive-dark);
}

.section-dark {
    background-color: var(--surface-dark);
    color: var(--on-dark);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
    color: #FFFFFF;
}

.section-alt {
    background-color: var(--surface-alt);
    color: var(--on-surface-alt);
}

.card-surface {
    background: var(--surface);
    color: var(--text);
}

.card-surface h3,
.card-surface h4 {
    color: var(--heading);
}