:root {
    --brand-primary: hsl(149 78% 27%);
    --brand-secondary: hsl(164 100% 30%);
    --brand-accent: hsl(80 53% 65%);
    --brand-on-primary: hsl(0 0% 100%);

    --color-primary: var(--brand-primary);
    --color-secondary: var(--brand-secondary);
    --color-accent: var(--brand-accent);
    --color-on-primary: var(--brand-on-primary);

    /* semantic state tokens */
    --switch-on-bg: var(--color-primary);
}

.bapBtn.green {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

h1,
h2,
h3 {
    color: var(--color-secondary);
}