/* Derived theme tokens. Base colors come from config/brand.php (injected as --eca-* / --brand-*). */

html[data-theme='dark'],
html:not([data-theme]) {
    color-scheme: dark;
    --focus-ring: color-mix(in srgb, var(--eca-primary) 40%, transparent);
    --eca-scrollbar-size: 6px;
    --eca-scrollbar-track: color-mix(in srgb, var(--eca-border) 35%, transparent);
    --eca-scrollbar-thumb: color-mix(in srgb, var(--eca-accent) 50%, var(--eca-primary) 35%);
    --eca-scrollbar-thumb-hover: color-mix(in srgb, var(--eca-accent) 70%, var(--eca-primary) 30%);
    --eca-primary-variant: color-mix(in srgb, var(--eca-primary) 82%, black);
}

html[data-theme='light'] {
    color-scheme: light;
    --focus-ring: color-mix(in srgb, var(--eca-primary) 28%, transparent);
    --eca-scrollbar-size: 6px;
    --eca-scrollbar-track: color-mix(in srgb, var(--eca-border) 55%, transparent);
    --eca-scrollbar-thumb: color-mix(in srgb, var(--eca-accent) 42%, var(--eca-text-muted) 58%);
    --eca-scrollbar-thumb-hover: color-mix(in srgb, var(--eca-accent) 62%, var(--eca-text-muted) 38%);
    --eca-primary-variant: color-mix(in srgb, var(--eca-primary) 82%, black);
}

@layer components {
    .eca-theme-bg {
        background-color: var(--eca-surface);
        color: var(--eca-text);
    }

    .eca-theme-card {
        background-color: var(--eca-card);
        border-color: var(--eca-border);
        color: var(--eca-text);
    }

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

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

    .eca-theme-border {
        border-color: var(--eca-border);
    }
}