:root {
    color-scheme: light;
}

.font-heading {
    font-family: var(--font-heading, system-ui, sans-serif);
}

.font-body {
    font-family: var(--font-body, system-ui, sans-serif);
}

.bg-primary {
    background-color: var(--primary);
}

.bg-primary-dark {
    background-color: var(--primary-dark);
}

.bg-secondary {
    background-color: var(--secondary);
}

.bg-accent {
    background-color: var(--accent);
}

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

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

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

.text-heading {
    color: var(--heading);
}

.text-text {
    color: var(--text);
}

.text-muted {
    color: var(--text-muted);
}

.text-on-primary {
    color: var(--on-primary);
}

.text-on-dark {
    color: var(--on-dark);
}

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

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

.section-image {
    width: 100%;
    border-radius: 1rem;
    display: block;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.15);
}

a.text-on-primary:hover {
    color: var(--on-primary);
}

button,
input,
textarea,
select {
    font-family: var(--font-body, system-ui, sans-serif);
}

input,
textarea,
select {
    background-color: var(--surface);
    color: var(--text);
}

strong {
    color: var(--heading);
}