/**
 * HairColorGPT Unified UI Tokens
 * Centralized design tokens for shared styling.
 */

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope, body.hcgpt-chat-page) {
    color-scheme: light;
    /* Brand + semantic colors */
    --hcgpt-brand: var(--hcgpt-primary);
    --hcgpt-primary: #4F46E5;
    --hcgpt-primary-hover: #4338CA;
    --hcgpt-primary-dark: #3730A3;
    --hcgpt-accent: #1A73E8;
    --hcgpt-success: #10B981;
    --hcgpt-success-hover: #059669;
    --hcgpt-warning: #F59E0B;
    --hcgpt-warning-hover: #D97706;
    --hcgpt-danger: #EF4444;
    --hcgpt-danger-hover: #DC2626;
    --hcgpt-info: #3B82F6;
    --hcgpt-info-hover: #2563EB;

    /* Grayscale */
    --hcgpt-gray-50: #F9FAFB;
    --hcgpt-gray-100: #F3F4F6;
    --hcgpt-gray-200: #E5E7EB;
    --hcgpt-gray-300: #D1D5DB;
    --hcgpt-gray-400: #9CA3AF;
    --hcgpt-gray-500: #6B7280;
    --hcgpt-gray-600: #4B5563;
    --hcgpt-gray-700: #374151;
    --hcgpt-gray-800: #1F2937;
    --hcgpt-gray-900: #111827;

    /* Grey spelling aliases */
    --hcgpt-grey-50: var(--hcgpt-gray-50);
    --hcgpt-grey-100: var(--hcgpt-gray-100);
    --hcgpt-grey-200: var(--hcgpt-gray-200);
    --hcgpt-grey-300: var(--hcgpt-gray-300);
    --hcgpt-grey-400: var(--hcgpt-gray-400);
    --hcgpt-grey-500: var(--hcgpt-gray-500);
    --hcgpt-grey-600: var(--hcgpt-gray-600);
    --hcgpt-grey-700: var(--hcgpt-gray-700);
    --hcgpt-grey-800: var(--hcgpt-gray-800);
    --hcgpt-grey-900: var(--hcgpt-gray-900);

    /* Semantic surfaces, text, borders */
    --hcgpt-color-bg: #f9f9fb;
    /* Adjusted to be slightly distinct from pure white */
    --hcgpt-color-surface: #ffffff;
    --hcgpt-app-bg: var(--hcgpt-color-bg);
    --hcgpt-surface: var(--hcgpt-color-surface);
    --hcgpt-surface-hover: var(--hcgpt-color-surface-2);
    --hcgpt-color-surface-2: var(--hcgpt-gray-50);
    --hcgpt-color-border: var(--hcgpt-gray-200);
    --hcgpt-color-text: var(--hcgpt-gray-900);
    --hcgpt-color-text-muted: var(--hcgpt-gray-600);
    --hcgpt-type-editorial-strong: var(--hcgpt-color-text);
    --hcgpt-type-editorial-mid: var(--hcgpt-color-muted);
    --hcgpt-type-structural-strong: var(--hcgpt-color-muted);
    --hcgpt-type-structural-soft: var(--hcgpt-color-text-muted);
    --hcgpt-color-focus-ring: var(--hcgpt-accent);
    --hcgpt-focus-ring: var(--hcgpt-color-focus-ring);
    --hcgpt-sidebar-bg: var(--hcgpt-color-surface);
    --hcgpt-sidebar-item-radius: 24px;
    --hcgpt-sidebar-item-hover-bg: color-mix(in srgb, var(--hcgpt-sidebar-bg) 86%, var(--hcgpt-color-text) 14%);
    --hcgpt-sidebar-item-active-bg: var(--hcgpt-color-surface-3);
    --hcgpt-sidebar-item-selected-bg: var(--hcgpt-sidebar-item-active-bg);
    --hcgpt-sidebar-item-text: var(--hcgpt-color-text);
    --hcgpt-sidebar-item-text-muted: var(--hcgpt-color-text-muted);
    --hcgpt-sidebar-divider: var(--hcgpt-color-border);
    --hcgpt-overlay-bg: var(--hcgpt-surface);
    --hcgpt-overlay-border: var(--hcgpt-color-border);
    --hcgpt-overlay-radius: var(--hcgpt-radius-xl);
    --hcgpt-overlay-shadow: var(--hcgpt-shadow-lg);
    --hcgpt-overlay-item-hover-bg: var(--hcgpt-color-surface-2);
    --hcgpt-overlay-backdrop-bg: var(--hcgpt-color-overlay);
    --hcgpt-menu-shell-radius: var(--hcgpt-radius-lg);
    --hcgpt-menu-shell-padding: 8px;
    --hcgpt-menu-item-radius: 8px;
    --hcgpt-menu-item-pad-y: 9px;
    --hcgpt-menu-item-pad-x: 12px;
    --hcgpt-menu-item-font-size: var(--hcgpt-font-size-13);
    --hcgpt-menu-item-font-weight: var(--hcgpt-font-weight-medium);
    --hcgpt-menu-item-line-height: var(--hcgpt-line-height-120);
    --hcgpt-menu-item-hover-bg: var(--hcgpt-overlay-item-hover-bg);
    --hcgpt-input-bg: var(--hcgpt-color-surface);
    --hcgpt-input-border: var(--hcgpt-color-border);
    --hcgpt-input-border-focus: var(--hcgpt-color-focus-ring);
    --hcgpt-input-shadow: 0 0 0 3px color-mix(in srgb, var(--hcgpt-color-focus-ring) 30%, transparent);
    --hcgpt-scrollbar-track: rgba(107, 114, 128, 0.06);
    --hcgpt-scrollbar-thumb: rgba(107, 114, 128, 0.28);
    --hcgpt-scrollbar-thumb-hover: rgba(75, 85, 99, 0.40);
    --hcgpt-control-hover-bg: var(--hcgpt-color-surface-2);
    --hcgpt-control-active-bg: var(--hcgpt-color-surface-3);
    --hcgpt-control-disabled-opacity: 0.55;
    --hcgpt-placeholder-color: var(--hcgpt-color-text-muted);
    --hcgpt-input-radius: 24px;
    --hcgpt-bubble-user-bg: var(--hcgpt-color-surface-2);
    --hcgpt-bubble-assistant-bg: transparent;
    --hcgpt-bubble-border: var(--hcgpt-color-border);
    --hcgpt-bubble-radius: var(--hcgpt-radius-lg);

    /* Extended semantic tokens */
    --hcgpt-color-surface-3: var(--hcgpt-gray-100);
    --hcgpt-color-border-strong: var(--hcgpt-gray-300);
    --hcgpt-color-muted: var(--hcgpt-gray-700);
    --hcgpt-color-subtle: var(--hcgpt-gray-600);

    /* Overlay */
    --hcgpt-color-overlay: rgba(17, 24, 39, 0.4);
    --hcgpt-color-overlay-soft: rgba(17, 24, 39, 0.1);

    /* On-colors for strong backgrounds */
    --hcgpt-color-on-primary: #ffffff;
    --hcgpt-color-on-danger: #ffffff;
    --hcgpt-color-on-success: #ffffff;
    --hcgpt-color-on-warning: #ffffff;
    --hcgpt-color-on-info: #ffffff;

    /* Z-index */
    --hcgpt-z-modal: 9999;

    /* Spacing scale (4px base) */
    --hcgpt-space-1: 4px;
    --hcgpt-space-2: 8px;
    --hcgpt-space-3: 12px;
    --hcgpt-space-4: 16px;
    --hcgpt-space-5: 20px;
    --hcgpt-space-6: 24px;
    --hcgpt-space-7: 28px;
    --hcgpt-space-8: 32px;
    --hcgpt-space-9: 36px;
    --hcgpt-space-10: 40px;

    /* Radius scale */
    --hcgpt-radius-sm: 4px;
    --hcgpt-radius-base: 6px;
    --hcgpt-radius-md: 8px;
    --hcgpt-radius-lg: 12px;
    --hcgpt-radius-xl: 16px;
    --hcgpt-radius-full: 9999px;

    /* Shadows */
    --hcgpt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --hcgpt-shadow-base: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --hcgpt-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
    --hcgpt-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --hcgpt-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Transitions */
    --hcgpt-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --hcgpt-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --hcgpt-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Typography (official families only) */
    --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;

    /* Font size scale */
    --hcgpt-font-size-9: 9px;
    --hcgpt-font-size-10: 10px;
    --hcgpt-font-size-11: 11px;
    --hcgpt-font-size-12: 12px;
    --hcgpt-font-size-13: 13px;
    --hcgpt-font-size-14: 14px;
    --hcgpt-font-size-15: 15px;
    --hcgpt-font-size-16: 16px;
    --hcgpt-font-size-17: 17px;
    --hcgpt-font-size-18: 18px;
    --hcgpt-font-size-20: 20px;
    --hcgpt-font-size-21: 21px;
    --hcgpt-font-size-22: 22px;
    --hcgpt-font-size-24: 24px;
    --hcgpt-font-size-25: 25px;
    --hcgpt-font-size-26: 26px;
    --hcgpt-font-size-28: 28px;
    --hcgpt-font-size-30: 30px;
    --hcgpt-font-size-32: 32px;
    --hcgpt-font-size-34: 34px;
    --hcgpt-font-size-35: 35px;

    /* Compatibility aliases */
    --hcgpt-text-xs: var(--hcgpt-font-size-12);
    --hcgpt-text-sm: var(--hcgpt-font-size-14);
    --hcgpt-text-base: var(--hcgpt-font-size-16);
    --hcgpt-text-md: var(--hcgpt-font-size-18);
    --hcgpt-text-lg: var(--hcgpt-font-size-20);

    /* Font weight scale */
    --hcgpt-font-weight-thin: 400;
    --hcgpt-font-weight-light: 300;
    --hcgpt-font-weight-regular: 400;
    --hcgpt-font-weight-medium: 500;
    --hcgpt-font-weight-semibold: 600;
    --hcgpt-font-weight-bold: 700;
    --hcgpt-font-weight-extrabold: 800;
    --hcgpt-font-weight-black: 900;

    /* Line-height scale */
    --hcgpt-line-height-0: 0;
    --hcgpt-line-height-100: 1;
    --hcgpt-line-height-110: 1.1;
    --hcgpt-line-height-120: 1.2;
    --hcgpt-line-height-125: 1.25;
    --hcgpt-line-height-130: 1.3;
    --hcgpt-line-height-135: 1.35;
    --hcgpt-line-height-140: 1.4;
    --hcgpt-line-height-145: 1.45;
    --hcgpt-line-height-150: 1.5;
    --hcgpt-line-height-155: 1.55;
    --hcgpt-line-height-160: 1.6;
    --hcgpt-line-height-165: 1.65;
    --hcgpt-line-height-12px: 12px;
    --hcgpt-line-height-16px: 16px;
    --hcgpt-line-height-18px: 18px;
    --hcgpt-line-height-20px: 20px;
    --hcgpt-line-height-32px: 32px;
    --hcgpt-lineheight-base: var(--hcgpt-line-height-150);

    /* Letter-spacing scale */
    --hcgpt-letter-spacing-0: 0;
    --hcgpt-letter-spacing-001em: 0.01em;
    --hcgpt-letter-spacing-002em: 0.02em;
    --hcgpt-letter-spacing-003em: 0.03em;
    --hcgpt-letter-spacing-004em: 0.04em;
    --hcgpt-letter-spacing-005em: 0.05em;
    --hcgpt-letter-spacing-008em: 0.08em;
    --hcgpt-letter-spacing-010em: 0.1em;
    --hcgpt-letter-spacing-012em: 0.12em;
    --hcgpt-letter-spacing-016em: 0.16em;
    --hcgpt-letter-spacing-05px: 0.5px;

    /* Text transform scale */
    --hcgpt-text-transform-none: none;
    --hcgpt-text-transform-uppercase: uppercase;
    --hcgpt-text-transform-lowercase: lowercase;

    /* Layout */
    /* ChatGPT-style content column widths (Tailwind-style breakpoints).
       Defaults to fluid on small screens; snaps to 48rem (md), 40rem (lg), 48rem (xl). */
    --hcgpt-chat-col-md: 48rem;
    /* 768px */
    --hcgpt-chat-col-lg: 40rem;
    /* 640px */
    --hcgpt-chat-col-xl: 48rem;
    /* 768px */
    --hcgpt-chat-col-max: 100%;
    --hcgpt-col-gutter-mobile: 12px;
    --hcgpt-col-gutter-desktop: 16px;
    --hcgpt-col-gutter-x: var(--hcgpt-col-gutter-mobile);
    --hcgpt-chat-edge-pad: clamp(14px, 2.6vw, 44px);
    --hcgpt-chat-frame-max: var(--hcgpt-chat-col-max);
    --hcgpt-chat-frame-pad: var(--hcgpt-col-gutter-x);
    --hcgpt-bubble-user-max: 78%;
    --hcgpt-bubble-assistant-max: 100%;
    --hcgpt-turn-gap-y: 12px;
}

/* Chat column max-width (ChatGPT-like) */
@media (min-width: 768px) {
    :where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) {
        --hcgpt-chat-col-max: var(--hcgpt-chat-col-md);
        --hcgpt-col-gutter-x: var(--hcgpt-col-gutter-desktop);
        --hcgpt-bubble-user-max: 64%;
        --hcgpt-turn-gap-y: 16px;
    }
}

@media (min-width: 1024px) {
    :where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) {
        --hcgpt-chat-col-max: var(--hcgpt-chat-col-lg);
    }
}

@media (min-width: 1280px) {
    :where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) {
        --hcgpt-chat-col-max: var(--hcgpt-chat-col-xl);
    }
}

:where(.hcgpt-scope[data-hcgpt-theme="dark"]),
:where(body.hcgpt-chat-page.hcgpt-theme-dark),
:where(body.hcgpt-chat-page[data-hcgpt-theme="dark"]),
:where([data-hcgpt-theme="dark"]) #hcgpt-unified-chat-wrapper {
    color-scheme: dark;

    --hcgpt-color-bg: #000000;
    /* Dark canvas */
    --hcgpt-color-surface: #1a1d24;
    /* Elevated surface */

    --hcgpt-app-bg: var(--hcgpt-color-bg);
    --hcgpt-surface: var(--hcgpt-color-surface);

    --hcgpt-color-surface-2: #272b36;
    --hcgpt-color-border: #5D5D5D;
    --hcgpt-color-text: #f3f4f6;
    --hcgpt-color-text-muted: #9ca3af;
    --hcgpt-color-focus-ring: var(--hcgpt-accent);
    --hcgpt-bubble-user-bg: var(--hcgpt-color-surface-3);
    --hcgpt-bubble-border: var(--hcgpt-color-border-strong);

    --hcgpt-color-surface-3: #272b36;
    --hcgpt-color-border-strong: #5D5D5D;
    --hcgpt-color-muted: #d1d5db;
    --hcgpt-color-subtle: #9ca3af;
    --hcgpt-scrollbar-track: rgba(148, 163, 184, 0.08);
    --hcgpt-scrollbar-thumb: rgba(148, 163, 184, 0.30);
    --hcgpt-scrollbar-thumb-hover: rgba(148, 163, 184, 0.44);

    --hcgpt-color-overlay: rgba(0, 0, 0, 0.75);
    --hcgpt-color-overlay-soft: rgba(0, 0, 0, 0.45);
}

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

    :where(.hcgpt-scope:not([data-hcgpt-theme])),
    :where(.hcgpt-scope[data-hcgpt-theme="system"]),
    :where(body.hcgpt-chat-page.hcgpt-theme-system) {
        color-scheme: dark;

        --hcgpt-color-bg: #000000;
        --hcgpt-color-surface: #1a1d24;
        --hcgpt-color-surface-2: #272b36;
        --hcgpt-color-border: #5D5D5D;
        --hcgpt-color-text: #f3f4f6;
        --hcgpt-color-text-muted: #9ca3af;
        --hcgpt-color-focus-ring: var(--hcgpt-accent);
        --hcgpt-bubble-user-bg: var(--hcgpt-color-surface-3);
        --hcgpt-bubble-border: var(--hcgpt-color-border-strong);

        --hcgpt-color-surface-3: #272b36;
        --hcgpt-color-border-strong: #5D5D5D;
        --hcgpt-color-muted: #d1d5db;
        --hcgpt-color-subtle: #9ca3af;
        --hcgpt-scrollbar-track: rgba(148, 163, 184, 0.08);
        --hcgpt-scrollbar-thumb: rgba(148, 163, 184, 0.30);
        --hcgpt-scrollbar-thumb-hover: rgba(148, 163, 184, 0.44);

        --hcgpt-color-overlay: rgba(0, 0, 0, 0.65);
        --hcgpt-color-overlay-soft: rgba(0, 0, 0, 0.35);
    }
}