:root {
    --pico-font-family-sans-serif: var(--font-sans);
    --pico-font-size: 100%;
    --pico-background-color: var(--edu-bg-soft);
    --pico-color: var(--edu-ink);
    --pico-muted-color: var(--edu-ink-soft);
    --pico-h1-color: var(--edu-ink);
    --pico-h2-color: var(--edu-ink);
    --pico-h3-color: var(--edu-ink);
    --pico-h4-color: var(--edu-ink);
    --pico-h5-color: var(--edu-ink);
    --pico-h6-color: var(--edu-ink-soft);
    --pico-primary: var(--edu-accent);
    --pico-primary-background: var(--edu-accent);
    --pico-primary-hover-background: var(--edu-accent-strong);
    --pico-primary-focus: rgba(47, 103, 255, 0.18);
    --pico-primary-inverse: var(--button-primary-ink);
    --pico-form-element-background-color: var(--edu-surface-strong);
    --pico-form-element-selected-background-color: var(--edu-secondary-soft);
    --pico-form-element-border-color: var(--edu-border);
    --pico-form-element-color: var(--edu-ink);
    --pico-form-element-active-background-color: var(--edu-surface-strong);
    --pico-form-element-active-border-color: var(--edu-secondary);
    --pico-form-element-focus-color: rgba(47, 103, 255, 0.16);
    --pico-form-element-placeholder-color: var(--edu-ink-soft);
    --pico-card-background-color: var(--edu-surface);
    --pico-card-sectioning-background-color: transparent;
    --pico-card-border-color: transparent;
    --pico-dropdown-background-color: var(--edu-surface-strong);
    --pico-dropdown-border-color: var(--edu-border);
    --pico-dropdown-color: var(--edu-ink);
    --pico-dropdown-hover-background-color: var(--edu-secondary-soft);
}

:root[data-theme="dark"] {
    --pico-primary-focus: rgba(120, 161, 255, 0.22);
    --pico-form-element-focus-color: rgba(120, 161, 255, 0.22);
}

@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --pico-primary-focus: rgba(120, 161, 255, 0.22);
        --pico-form-element-focus-color: rgba(120, 161, 255, 0.22);
    }
}