/* Theme tokens and dark mode overrides */
/* Light (default) theme tokens */
:root {
    color-scheme: light;
    /* allow form controls to adapt */
    /* Core background & surface */
    --color-bg: #F6F6F6;
    --color-bg-alt: #FBFBFB;
    --color-bg-message: #EEE;
    --color-bg-avatar: #1E1E1E;
    --color-surface: #FFFFFF;
    --color-surface-alt: #F2F2F2;
    --color-elevated: #FFFFFF;
    --color-surface-translucent: rgba(255, 255, 255, 0.8);
    /* Borders & separators */
    --color-border: #D9D9D9;
    --color-border-strong: #B5B5B5;
    /* Text */
    --color-text: #1E1E1E;
    --color-text-muted: #666666;
    --color-text-inverse: #FFFFFF;
    --color-input-placeholder: #5B5B5B;
    /* Accents / interactive */
    --color-accent: #007BFF;
    --color-accent-rgb: 0 123 255;
    /* existing active-color */
    --color-accent-hover: #2980b9;
    --color-danger: #e74c3c;
    --color-danger-rgb: 231 76 60;
    --color-danger-hover: #c0392b;
    --color-warning: #f39c12;
    --color-success: #2ecc71;
    --color-success-soft: #dfeee5;
    --color-selection-border: rgba(37, 99, 235, 0.35);
    --color-selection-glow: rgba(37, 99, 235, 0.25);
    --color-selection-bg: #eef2ff;
    --color-text-on-gradient: #FFFFFF;
    --color-gradient-start: #F68000;
    /* existing gradient start */
    --color-gradient-end: #B201D1;
    /* existing gradient end */
    --color-overlay: rgba(0, 0, 0, 0.5);
    --color-overlay-inverse: rgba(255, 255, 255, 0.8);
    /* Controls */
    --color-button-primary-bg: #1E1E1E;
    --color-button-primary-hover: #000000;
    --color-button-primary-text: #FFFFFF;
    --color-button-ghost-bg: transparent;
    --color-button-ghost-border: #D9D9D9;
    --color-button-ghost-hover-bg: #F2F2F2;
    --color-button-ghost-text: #1E1E1E;
    --color-button-disabled-bg: #E0E0E0;
    --color-button-disabled-border: #E0E0E0;
    --color-button-disabled-text: #9E9E9E;
    --color-control-neutral-bg: #616161;
    --color-control-neutral-hover: #4a4a4a;
    --color-control-neutral-text: #FFFFFF;
    /* Shadows */
    --shadow-color-rgb: 0 0 0;
    --shadow-soft: 0 5px 15px rgba(var(--shadow-color-rgb) / 0.10);
    --shadow-hard: 0 8px 30px rgba(var(--shadow-color-rgb) / 0.20);
    /* Focus */
    --color-focus-ring: #2684ff;

    /* Legacy variable aliases (so existing CSS continues to work) */
    --primary-color: var(--color-text);
    --secondary-color: #2c3e50;
    --active-color: var(--color-accent);
    --accent-color: var(--color-danger);
    --light-color: var(--color-bg-alt);
    --dark-color: var(--color-text);
}

/* Dark theme overrides */
html.theme-dark {
    color-scheme: dark;
    --color-bg: #383838;
    /* window background from Figma */
    --color-bg-alt: #2E2E2E;
    --color-bg-message: #383838;
    --color-bg-avatar: #EEE;
    /* header / side rail backing */
    --color-surface: #2E2E2E;
    --color-surface-alt: #444444;
    --color-elevated: #3A3A3A;
    --color-surface-translucent: rgba(46, 46, 46, 0.8);
    --color-border: #101010;
    /* stroke from Figma */
    --color-border-strong: #1A1A1A;
    --color-text: #F2F2F2;
    --color-text-muted: #C0C0C0;
    --color-text-inverse: #1E1E1E;
    --color-input-placeholder: #B2B2B2;
    --color-accent: #4DA3FF;
    --color-accent-rgb: 77 163 255;
    --color-accent-hover: #3894f5;
    --color-danger: #ff6b5d;
    --color-danger-rgb: 255 107 93;
    --color-danger-hover: #ff826f;
    --color-warning: #ffb347;
    --color-success: #41d482;
    --color-success-soft: rgba(65, 212, 130, 0.18);
    --color-selection-border: rgba(77, 163, 255, 0.6);
    --color-selection-glow: rgba(77, 163, 255, 0.35);
    --color-selection-bg: rgba(77, 163, 255, 0.18);
    --color-text-on-gradient: #FFFFFF;
    --color-overlay: rgba(0, 0, 0, 0.7);
    --color-overlay-inverse: rgba(56, 56, 56, 0.85);
    --color-button-primary-bg: #F2F2F2;
    --color-button-primary-hover: #E1E1E1;
    --color-button-primary-text: #1E1E1E;
    --color-button-ghost-bg: transparent;
    --color-button-ghost-border: #3A3A3A;
    --color-button-ghost-hover-bg: #444444;
    --color-button-ghost-text: #F2F2F2;
    --color-button-disabled-bg: #3A3A3A;
    --color-button-disabled-border: #3A3A3A;
    --color-button-disabled-text: #777777;
    --color-control-neutral-bg: #4A4A4A;
    --color-control-neutral-hover: #5A5A5A;
    --color-control-neutral-text: #F2F2F2;
    --shadow-color-rgb: 0 0 0;
    --shadow-soft: 0 5px 15px rgba(var(--shadow-color-rgb) / 0.40);
    --shadow-hard: 0 8px 30px rgba(var(--shadow-color-rgb) / 0.60);
    --color-focus-ring: #5ca9ff;

    --primary-color: var(--color-text);
    --secondary-color: #d0d7dd;
    --active-color: var(--color-accent);
    --accent-color: var(--color-danger);
    --light-color: var(--color-surface-alt);
    --dark-color: var(--color-text);
}