/**
 * HairColorGPT Hardcoded Branding Tokens
 * Overrides UI tokens for light/dark themes without settings.
 */

:where(.hcgpt-scope) {
    --hcgpt-primary: #4A9EFF;
    --hcgpt-primary-hover: #4A9EFF;
    --hcgpt-accent: #4A9EFF;
    --hcgpt-color-surface: #FFFFFF;
    --hcgpt-color-surface-2: #F7F7F7;
    --hcgpt-color-text: #1A1A1A;
    --hcgpt-color-text-muted: #8E8E8E;
    --hcgpt-color-muted: #8E8E8E;
    --hcgpt-color-subtle: #8E8E8E;
    --hcgpt-radius-sm: 8px;
    --hcgpt-radius-base: 10px;
    --hcgpt-radius-md: 14px;
    --hcgpt-radius-lg: 18px;
    --hcgpt-radius-xl: 28px;
    --hcgpt-radius-full: 9999px;
    --hcgpt-font-sans: "Open Sans", "Segoe UI", Arial, sans-serif;
    --hcgpt-font-heading: "Open Sans", "Segoe UI", Arial, sans-serif;
    --hcgpt-font-mono: "Roboto Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

:where(.hcgpt-scope[data-hcgpt-theme="dark"]) {
    --hcgpt-primary: #4A9EFF;
    --hcgpt-primary-hover: #4A9EFF;
    --hcgpt-accent: #4A9EFF;
    --hcgpt-color-surface: #2F2F2F;
    --hcgpt-color-surface-2: #171717;
    --hcgpt-color-surface-3: #1A1A1A;
    --hcgpt-color-text: #ECECEC;
    --hcgpt-color-text-muted: #B4B4B4;
    --hcgpt-color-muted: #8E8E8E;
    --hcgpt-color-subtle: #707070;
    --hcgpt-color-border: #5D5D5D;
    --hcgpt-color-border-strong: #5D5D5D;
}

@media (prefers-color-scheme: dark) {

    :where(.hcgpt-scope:not([data-hcgpt-theme])),
    :where(.hcgpt-scope[data-hcgpt-theme="system"]) {
        --hcgpt-primary: #4A9EFF;
        --hcgpt-primary-hover: #4A9EFF;
        --hcgpt-accent: #4A9EFF;
        --hcgpt-color-surface: #2F2F2F;
        --hcgpt-color-surface-2: #171717;
        --hcgpt-color-surface-3: #1A1A1A;
        --hcgpt-color-text: #ECECEC;
        --hcgpt-color-text-muted: #B4B4B4;
        --hcgpt-color-muted: #8E8E8E;
        --hcgpt-color-subtle: #707070;
        --hcgpt-color-border: #5D5D5D;
        --hcgpt-color-border-strong: #5D5D5D;
    }
}