/* ======================================================
   Design Tokens — InteliAug Chat UI
   ====================================================== */
:root {
    /* --- Blue Scale --- */
    --blue-50: #EFF6FF;
    --blue-100: #DBEAFE;
    --blue-200: #BFDBFE;
    --blue-300: #93C5FD;
    --blue-400: #60A5FA;
    --blue-500: #3B82F6;
    --blue-600: #2563EB;
    --blue-700: #1D4ED8;
    --blue-800: #1E40AF;
    --blue-900: #1E3A8A;

    /* --- Slate Scale (blue-tinted neutrals) --- */
    --slate-50: #F8FAFC;
    --slate-100: #F1F5F9;
    --slate-200: #E2E8F0;
    --slate-300: #CBD5E1;
    --slate-400: #94A3B8;
    --slate-500: #64748B;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1E293B;
    --slate-900: #0F172A;

    /* --- Semantic Backgrounds --- */
    --bg-page: var(--slate-50);
    --bg-surface: #FFFFFF;
    --bg-elevated: var(--slate-100);
    --bg-recessed: #F5F7FA;
    --bg-hover: var(--slate-100);
    --bg-active: var(--blue-50);

    /* --- Borders --- */
    --border-subtle: var(--blue-100);
    --border-default: var(--blue-200);
    --border-strong: var(--blue-300);
    --border-primary: var(--blue-200);
    --border-focus: var(--blue-600);

    /* --- Accent --- */
    --accent: var(--blue-600);
    --accent-hover: var(--blue-700);
    --accent-light: var(--blue-50);
    --accent-wash: rgba(37, 99, 235, 0.06);

    /* --- Text --- */
    --text-primary: var(--slate-900);
    --text-secondary: var(--slate-500);
    --text-tertiary: var(--slate-400);
    --text-inverse: #FFFFFF;
    --text-accent: var(--blue-600);

    /* --- Feedback --- */
    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;
    --info: var(--blue-500);

    /* --- Shadows (multi-layer) --- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 24px -4px rgba(15, 23, 42, 0.08), 0 4px 8px -2px rgba(15, 23, 42, 0.05);
    --shadow-xl: 0 20px 40px -8px rgba(15, 23, 42, 0.1), 0 8px 16px -4px rgba(15, 23, 42, 0.06);
    --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.15);
    --shadow-blue: 0 4px 14px rgba(37, 99, 235, 0.18);

    /* --- Spacing --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* --- Radius --- */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-full: 9999px;

    /* --- Motion --- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;

    /* --- Z-Index --- */
    --z-background: -1;
    --z-default: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-tooltip: 400;
    --z-widget: 1000;

    /* --- Brochure Accent Palette --- */
    --brochure-blue: #3B82F6;
    --brochure-blue-deep: #2563EB;
    --brochure-cyan: #06B6D4;
    --brochure-rose: #F43F5E;
    --brochure-amber: #F59E0B;
    --brochure-gradient: linear-gradient(135deg, #60A5FA 0%, #2563EB 50%, #1E40AF 100%);
    --brochure-gradient-warm: linear-gradient(135deg, #F43F5E 0%, #3B82F6 50%, #1D4ED8 100%);
    --brochure-glow: 0 0 40px rgba(37, 99, 235, 0.3);
    --brochure-glow-cyan: 0 0 40px rgba(6, 182, 212, 0.25);

    /* --- Legacy aliases (keep dependent code working) --- */
    --primary-blue: var(--blue-600);
    --unique-blue: var(--blue-500);
    --light-blue: var(--blue-400);
    --dark-blue: var(--blue-800);
    --accent-blue: var(--blue-500);
    --primary-gradient: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 100%);
    --secondary-gradient: linear-gradient(135deg, var(--blue-400) 0%, var(--blue-500) 100%);
    --hover-gradient: var(--accent-wash);
    --white-bg: var(--bg-surface);
    --light-gray: var(--bg-elevated);
    --gray-border: var(--slate-200);
    --spacing-xs: var(--space-1);
    --spacing-sm: var(--space-2);
    --spacing-md: var(--space-4);
    --spacing-lg: var(--space-6);
    --spacing-xl: var(--space-8);
    --transition-fast: var(--duration-fast) var(--ease-out);
    --transition-base: var(--duration-base) var(--ease-out);
    --transition-slow: var(--duration-slow) var(--ease-out);
}

/* Dark theme */
[data-theme="dark"] {
    --bg-page: #0B0F1A;
    --bg-surface: #111827;
    --bg-elevated: #1E293B;
    --bg-recessed: #0F172A;
    --bg-hover: #1E293B;
    --bg-active: rgba(37, 99, 235, 0.15);

    --border-subtle: rgba(255, 255, 255, 0.04);
    --border-default: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.13);
    --border-primary: rgba(255, 255, 255, 0.08);

    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-tertiary: #64748B;

    --white-bg: #111827;
    --light-gray: #1E293B;
    --gray-border: rgba(255, 255, 255, 0.08);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);
}