@layer theme {
    :where(:root) {
        /* Shared UI roles follow the active theme palette. */
        --color-paper: var(--color-ui-50);
        --color-line: var(--color-ui-300);
        --color-muted: var(--color-ui-600);
        --color-disabled: var(--color-ui-500);
        --color-primary: var(--color-primary-700);
        --color-secondary: var(--color-secondary-500);
        --color-accent: var(--color-accent-500);
        --site-button-primary-background: var(--color-primary);
        --color-primary-text-hover: var(--color-primary-900);
        --site-button-primary-hover-background: var(--color-primary-900);

        /* Keep the full accent scale available even when Tailwind omits unused colors. */
        --color-accent-50: var(--color-emerald-50, oklch(97.9% 0.021 166.113));
        --color-accent-100: var(--color-emerald-100, oklch(95% 0.052 163.051));
        --color-accent-200: var(--color-emerald-200, oklch(90.5% 0.093 164.15));
        --color-accent-300: var(--color-emerald-300, oklch(84.5% 0.143 164.978));
        --color-accent-400: var(--color-emerald-400, oklch(76.5% 0.177 163.223));
        --color-accent-500: var(--color-emerald-500, oklch(69.6% 0.17 162.48));
        --color-accent-600: var(--color-emerald-600, oklch(59.6% 0.145 163.225));
        --color-accent-700: var(--color-emerald-700, oklch(50.8% 0.118 165.612));
        --color-accent-800: var(--color-emerald-800, oklch(43.2% 0.095 166.913));
        --color-accent-900: var(--color-emerald-900, oklch(37.8% 0.077 168.94));
        --color-accent-950: var(--color-emerald-950, oklch(26.2% 0.051 172.552));
    }
}

.site-border-line {
    border: 1px solid var(--color-line);
}

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

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

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

@media (hover: hover) {
    .site-primary-hover-text:hover,
    .group:hover .site-primary-hover-text {
        color: var(--color-primary-text-hover);
    }

    .site-primary-hover-background:hover {
        background-color: var(--site-button-primary-hover-background);
    }
}