/* Landing pages follow the operating-system preference. No theme switch is shown. */
:root {
    color-scheme: light dark;
    --ej-primary: var(--ej-color-purple-500);
    --ej-primary-hover: var(--ej-color-purple-700);
    --ej-primary-soft: var(--ej-color-purple-50);
    --ej-brand: var(--ej-color-purple-500);
    --ej-action-primary: var(--ej-color-purple-500);
    --ej-action-primary-hover: var(--ej-color-purple-700);
    --ej-action-primary-text: var(--ej-color-neutral-0);
    --ej-action-accent-hover: var(--ej-color-gold-700);
    --ej-accent: var(--ej-color-gold-500);
    --ej-accent-soft: var(--ej-color-gold-50);
    --ej-info: var(--ej-color-teal-600);
    --ej-success: var(--ej-color-green-600);
    --ej-warning: var(--ej-color-amber-700);
    --ej-danger: var(--ej-color-red-600);
    --ej-page: var(--ej-color-neutral-50);
    --ej-page-raised: var(--ej-color-neutral-25);
    --ej-surface: var(--ej-color-neutral-0);
    --ej-surface-subtle: var(--ej-color-neutral-100);
    --ej-text: var(--ej-color-neutral-900);
    --ej-text-muted: var(--ej-color-neutral-600);
    --ej-heading: var(--ej-color-neutral-950);
    --ej-border: var(--ej-color-neutral-200);
    --ej-border-brand: var(--ej-color-purple-200);
    --ej-on-primary: var(--ej-color-neutral-0);
    --ej-on-accent: var(--ej-color-neutral-950);
    --ej-focus: #8c82ff;
    --ej-header-bg: rgb(251 250 255 / .92);
}

@media (prefers-color-scheme: dark) {
    :root {
        --ej-primary: #8b80ff;
        --ej-primary-hover: #a69eff;
        --ej-primary-soft: #28234f;
        --ej-brand: var(--ej-color-purple-500);
        --ej-action-primary: var(--ej-color-purple-500);
        --ej-action-primary-hover: var(--ej-color-purple-700);
        --ej-action-primary-text: var(--ej-color-neutral-0);
        --ej-action-accent-hover: var(--ej-color-gold-700);
        --ej-accent: #f4b62e;
        --ej-accent-soft: #352a12;
        --ej-info: #48b8ce;
        --ej-success: #4ac477;
        --ej-warning: #f1a747;
        --ej-danger: #ff7373;
        --ej-page: #14131d;
        --ej-page-raised: #181722;
        --ej-surface: #201e2b;
        --ej-surface-subtle: #292735;
        --ej-text: #efedf6;
        --ej-text-muted: #aaa7b8;
        --ej-heading: #ffffff;
        --ej-border: #383544;
        --ej-border-brand: #4b436f;
        --ej-on-primary: #ffffff;
        --ej-on-accent: #18140b;
        --ej-focus: #b5afff;
        --ej-header-bg: rgb(20 19 29 / .92);
        --ej-shadow-sm: 0 1px 2px rgb(0 0 0 / .18);
        --ej-shadow-md: 0 14px 34px rgb(0 0 0 / .24);
        --ej-shadow-lg: 0 26px 70px rgb(0 0 0 / .32);
    }
}

/* Explicit overrides are used by the UI Lab only; normal landing pages stay automatic. */
:root[data-ej-theme="light"] {
    color-scheme: light;
    --ej-primary: var(--ej-color-purple-500);
    --ej-primary-hover: var(--ej-color-purple-700);
    --ej-primary-soft: var(--ej-color-purple-50);
    --ej-brand: var(--ej-color-purple-500);
    --ej-action-primary: var(--ej-color-purple-500);
    --ej-action-primary-hover: var(--ej-color-purple-700);
    --ej-action-primary-text: var(--ej-color-neutral-0);
    --ej-action-accent-hover: var(--ej-color-gold-700);
    --ej-accent: var(--ej-color-gold-500);
    --ej-accent-soft: var(--ej-color-gold-50);
    --ej-info: var(--ej-color-teal-600);
    --ej-success: var(--ej-color-green-600);
    --ej-warning: var(--ej-color-amber-700);
    --ej-danger: var(--ej-color-red-600);
    --ej-page: var(--ej-color-neutral-50);
    --ej-page-raised: var(--ej-color-neutral-25);
    --ej-surface: var(--ej-color-neutral-0);
    --ej-surface-subtle: var(--ej-color-neutral-100);
    --ej-text: var(--ej-color-neutral-900);
    --ej-text-muted: var(--ej-color-neutral-600);
    --ej-heading: var(--ej-color-neutral-950);
    --ej-border: var(--ej-color-neutral-200);
    --ej-border-brand: var(--ej-color-purple-200);
    --ej-on-primary: var(--ej-color-neutral-0);
    --ej-on-accent: var(--ej-color-neutral-950);
    --ej-focus: #8c82ff;
    --ej-header-bg: rgb(251 250 255 / .92);
    --ej-shadow-sm: 0 1px 2px rgb(18 17 26 / .05);
    --ej-shadow-md: 0 14px 34px rgb(18 17 26 / .10);
    --ej-shadow-lg: 0 26px 70px rgb(18 17 26 / .16);
}

:root[data-ej-theme="dark"] {
    color-scheme: dark;
    --ej-primary: #8b80ff;
    --ej-primary-hover: #a69eff;
    --ej-primary-soft: #28234f;
    --ej-brand: var(--ej-color-purple-500);
    --ej-action-primary: var(--ej-color-purple-500);
    --ej-action-primary-hover: var(--ej-color-purple-700);
    --ej-action-primary-text: var(--ej-color-neutral-0);
    --ej-action-accent-hover: var(--ej-color-gold-700);
    --ej-accent: #f4b62e;
    --ej-accent-soft: #352a12;
    --ej-info: #48b8ce;
    --ej-success: #4ac477;
    --ej-warning: #f1a747;
    --ej-danger: #ff7373;
    --ej-page: #14131d;
    --ej-page-raised: #181722;
    --ej-surface: #201e2b;
    --ej-surface-subtle: #292735;
    --ej-text: #efedf6;
    --ej-text-muted: #aaa7b8;
    --ej-heading: #ffffff;
    --ej-border: #383544;
    --ej-border-brand: #4b436f;
    --ej-on-primary: #ffffff;
    --ej-on-accent: #18140b;
    --ej-focus: #b5afff;
    --ej-header-bg: rgb(20 19 29 / .92);
    --ej-shadow-sm: 0 1px 2px rgb(0 0 0 / .18);
    --ej-shadow-md: 0 14px 34px rgb(0 0 0 / .24);
    --ej-shadow-lg: 0 26px 70px rgb(0 0 0 / .32);
}