/* wwwroot/css/theme-colors.css */

/* Design tokens only: palettes + semantics + component tokens */
:root {
    /* Brand palette (RGB triplets) */
    --color-brand-50: 247 247 245;
    --color-brand-100: 236 236 232;
    --color-brand-200: 216 216 210;
    --color-brand-300: 190 190 182;
    --color-brand-400: 140 140 132;
    --color-brand-500: 107 107 100;
    --color-brand-600: 79 79 72;
    --color-brand-700: 58 58 58;
    --color-brand-800: 42 42 42;
    --color-brand-900: 30 30 30;

    /* Neutral palette (RGB triplets) */
    --color-neutral-50: 249 249 247;
    --color-neutral-100: 243 243 239;
    --color-neutral-200: 233 233 227;
    --color-neutral-300: 215 215 208;
    --color-neutral-400: 182 182 174;
    --color-neutral-500: 148 148 140;
    --color-neutral-600: 115 115 108;
    --color-neutral-700: 86 86 80;
    --color-neutral-800: 47 47 45;
    --color-neutral-900: 11 11 11;

    /* Semantic surfaces (RGB triplets) */
    --surface-1: var(--color-neutral-50);
    --surface-2: var(--color-neutral-100);
    --surface-3: var(--color-neutral-200);
    --surface-inverse: var(--color-neutral-900);

    /* Semantic text (RGB triplets) */
    --text-primary: var(--color-neutral-900);
    --text-secondary: var(--color-neutral-800);
    --text-muted: var(--color-neutral-700);
    --text-inverse: var(--color-neutral-50);
    --text-link: var(--color-brand-800);
    --text-link-hover: var(--color-brand-900);

    /* Semantic borders (full colors) */
    --border-default: rgba(0, 0, 0, 0.12);
    --border-muted: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.2);

    /* Focus ring */
    --focus-ring: 0 0 0;
    --focus-ring-alpha: 0.45;

    /* Interactive */
    --interactive-primary: var(--color-brand-900);
    --interactive-primary-hover: var(--color-brand-700);
    --interactive-secondary: var(--color-brand-800);
    --interactive-secondary-hover: var(--color-brand-700);
    --interactive-ghost: var(--color-neutral-900);

    /* Status colors (RGB triplets) */
    --color-success: 0 122 90;
    --color-warning: 173 94 0;
    --color-danger: 176 36 48;
    --color-info: 15 76 129;

    /* Header backgrounds */
    --header-bg-light: #f7f7f5;
    --header-bg-dark: #0b0b0b;

    /* Compatibility tokens (keep for existing utility overrides) */
    --mpl-primary-r: 30;
    --mpl-primary-g: 30;
    --mpl-primary-b: 30;
    --mpl-secondary-r: 42;
    --mpl-secondary-g: 42;
    --mpl-secondary-b: 42;
    --mpl-primary-hover-r: 58;
    --mpl-primary-hover-g: 58;
    --mpl-primary-hover-b: 58;
    --mpl-secondary-hover-r: 51;
    --mpl-secondary-hover-g: 51;
    --mpl-secondary-hover-b: 51;
    --mpl-primary-ring: rgb(var(--color-brand-900) / 0.45);
    --mpl-secondary-ring: rgb(var(--color-brand-800) / 0.32);

    /* Floating chat tokens */
    --chat-panel-bg: rgb(var(--surface-1));
    --chat-surface: rgb(var(--surface-2));
    --chat-border: rgba(30, 30, 30, 0.26);
    --chat-text: rgb(var(--text-primary));
    --chat-muted: rgba(26, 26, 26, 0.72);
    --chat-accent: rgb(var(--interactive-primary));
    --chat-accent-strong: rgb(var(--interactive-secondary));
    --chat-user-bg: rgba(var(--mpl-primary-r), var(--mpl-primary-g), var(--mpl-primary-b), 0.18);
    --chat-ai-bg: rgba(var(--mpl-secondary-r), var(--mpl-secondary-g), var(--mpl-secondary-b), 0.12);
    --chat-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.dark {
    /* Semantic surfaces (RGB triplets) */
    --surface-1: 11 11 11;
    --surface-2: 15 15 15;
    --surface-3: 22 22 22;
    --surface-inverse: 249 249 247;

    /* Semantic text (RGB triplets) */
    --text-primary: 242 242 242;
    --text-secondary: 214 214 214;
    --text-muted: 184 184 184;
    --text-inverse: 11 11 11;
    --text-link: 242 242 242;
    --text-link-hover: 255 255 255;

    /* Semantic borders (full colors) */
    --border-default: rgba(255, 255, 255, 0.14);
    --border-muted: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.2);

    /* Focus ring */
    --focus-ring: 255 255 255;
    --focus-ring-alpha: 0.35;

    /* Floating chat tokens */
    --chat-panel-bg: #0f0f0f;
    --chat-surface: #161616;
    --chat-border: rgba(255, 255, 255, 0.18);
    --chat-text: #f2f2f2;
    --chat-muted: rgba(242, 242, 242, 0.72);
    --chat-user-bg: rgba(var(--mpl-primary-r), var(--mpl-primary-g), var(--mpl-primary-b), 0.22);
    --chat-ai-bg: rgba(var(--mpl-secondary-r), var(--mpl-secondary-g), var(--mpl-secondary-b), 0.2);
    --chat-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}