/* Theme CSS - CSS Custom Properties for Light/Dark themes */

/* Light Theme (default) */
:root[data-theme="light"] {
    /* Background colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f7fa;
    --bg-tertiary: #eef1f5;
    --bg-hover: #e8ecf0;

    /* Text colors */
    --text-primary: #1a1d23;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-inverse: #ffffff;

    /* Accent colors */
    --accent: #007bff;
    --accent-hover: #0056b3;
    --accent-light: rgba(0, 123, 255, 0.1);

    /* Status colors */
    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.1);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.1);
    --error: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.1);

    /* Border colors */
    --border: #e5e7eb;
    --border-strong: #d1d5db;

    /* Message bubbles */
    --message-own-bg: #007bff;
    --message-own-text: #ffffff;
    --message-other-bg: #f1f3f5;
    --message-other-text: #1a1d23;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Dark Theme */
:root[data-theme="dark"] {
    /* Background colors */
    --bg-primary: #1a1d23;
    --bg-secondary: #0f1115;
    --bg-tertiary: #252a33;
    --bg-hover: #2d3340;

    /* Text colors */
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --text-inverse: #1a1d23;

    /* Accent colors */
    --accent: #4da3ff;
    --accent-hover: #7bb8ff;
    --accent-light: rgba(77, 163, 255, 0.15);

    /* Status colors */
    --success: #4ade80;
    --success-bg: rgba(74, 222, 128, 0.15);
    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.15);
    --error: #f87171;
    --error-bg: rgba(248, 113, 113, 0.15);

    /* Border colors */
    --border: #374151;
    --border-strong: #4b5563;

    /* Message bubbles */
    --message-own-bg: #0056b3;
    --message-own-text: #ffffff;
    --message-other-bg: #2d3340;
    --message-other-text: #f9fafb;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Apply theme to body */
body {
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Selection color */
::selection {
    background: var(--accent);
    color: var(--text-inverse);
}

/* Focus ring */
:focus-visible {
    outline-color: var(--accent);
}