/* ============================================================
   CSS Design Tokens - Single Source of Truth
   Simplified Dark Theme Palette:
   - #181818 - Dark background
   - #1A1A1A - Lighter dark
   - #252525 - Elevated surfaces (user bubble, input area, selected chat)
   - #5A5A5A - Muted text (scrollbar, chat history, disabled)
   - #7A7A7A - Input buttons
   - #FFFFFF - Primary text, icons, active elements
   - #E5E5E5 - Settings panel buttons
   - #E6CC80 - Highlighted AI response text
   ============================================================ */

:root {
  /* ========== Semantic Colors (kept) ========== */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-danger: #ef4444;

  /* ========== Shared Colors (theme-independent) ========== */
  --color-link: #3b82f6;

  /* ========== Simplified Dark Theme (default) ========== */
  /* Core palette */
  --color-dark: #181818;
  --color-dark-lighter: #1A1A1A;
  --color-dark-elevated: #252525;
  --color-muted: #5A5A5A;
  --color-light: #FFFFFF;
  --color-button-light: #E5E5E5;
  --color-highlight: #E6CC80;

  /* ========== Legacy/Fallback Variables (mapped to new palette) ========== */
  /* These maintain compatibility with existing CSS that references old brand colors */
  --color-primary: #7A7A7A;
  --color-secondary: #5A5A5A;
  --color-accent: #FFFFFF;
  --color-blue: #7A7A7A;
  --color-purple: #5A5A5A;
  --gradient-primary: #252525;
  --gradient-primary-vertical: #252525;
  --gradient-primary-vertical-hover: #E5E5E5;
  --gradient-primary-horizontal: #252525;
  --gradient-text: #FFFFFF;
  --gradient-hero: #181818;
  --gradient-accent: #252525;
  --gradient-dark: #181818;
  --gradient-card: rgba(255, 255, 255, 0.03);
  --gradient-blue-purple: #252525;

  /* ========== Backgrounds ========== */
  --bg-app: #181818;
  --bg-dark: #181818;
  --bg-darker: #181818;
  --bg-dark-alt: #1A1A1A;
  --bg-dark-subtle: #181818;
  --bg-dark-muted: #181818;
  --bg-dark-surface: #181818;
  --bg-chat-area: #1A1A1A;
  --bg-user-input: #252525;
  --bg-input: #1A1A1A;
  --bg-input-button: #7A7A7A;
  --bg-sidebar: #181818;
  --bg-sidebar-dark: #181818;
  --bg-card: rgba(255, 255, 255, 0.03);
  --bg-card-hover: rgba(255, 255, 255, 0.05);
  --bg-hover: rgba(255, 255, 255, 0.03);
  --bg-hover-strong: rgba(255, 255, 255, 0.1);
  --bg-overlay: rgba(0, 0, 0, 0.8);
  --bg-modal: rgba(0, 0, 0, 0.97);

  /* Sidebar gradients (now flat) */
  --gradient-scrollbar: #181818;
  --gradient-sidebar: #181818;
  --gradient-sidebar-reverse: #181818;

  /* ========== Backgrounds - Semantic ========== */
  --bg-danger: rgba(239, 68, 68, 0.1);
  --bg-danger-hover: rgba(239, 68, 68, 0.15);

  /* ========== Text Colors ========== */
  --text-primary: #FFFFFF;
  --text-secondary: #7A7A7A;
  --text-muted: #5A5A5A;
  --text-dim: #5A5A5A;
  --text-placeholder: rgba(255, 255, 255, 0.4);
  --text-gray: #5A5A5A;
  --text-highlight: #E6CC80;
  --chat-text: #cccccc;

  /* ========== Icon Colors ========== */
  --icon-default: #FFFFFF;

  /* ========== Button Colors ========== */
  --white-button: #E5E5E5;

  /* ========== Borders ========== */
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-light: rgba(255, 255, 255, 0.1);
  --border-medium: rgba(255, 255, 255, 0.2);
  --border-dark: #5A5A5A;

  /* ========== Shadows ========== */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-elevated: 0 30px 60px rgba(0, 0, 0, 0.9);

  /* ========== Spacing ========== */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */

  /* ========== Border Radius ========== */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ========== Transitions ========== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ========== Typography ========== */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 2rem;      /* 32px */
  --font-size-4xl: 2.5rem;    /* 40px */

  /* ========== Z-Index Scale ========== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-navbar: 1000;
  --z-modal-backdrop: 1100;
  --z-modal: 1200;
  --z-tooltip: 1300;
  --z-toast: 1400;

  /* ========== Tutorial Bubble Colors ========== */
  --tutorial-bg: #1A1A1A;
  --tutorial-text: #FFFFFF;
  --tutorial-border: rgba(255, 255, 255, 0.2);
  --tutorial-shadow: rgba(0, 0, 0, 0.3);
  --tutorial-button-bg: rgba(255, 255, 255, 0.1);
  --tutorial-button-hover: rgba(255, 255, 255, 0.15);

  /* ========== Light Theme (About Page) ========== */
  --light-bg: #fafafa;
  --light-bg-white: #ffffff;
  --light-bg-gray: #f7fafc;
  --light-text-dark: #1a202c;
  --light-text-body: #2d3748;
  --light-text-muted: #4a5568;
  --light-text-gray: #718096;
  --light-border: #e2e8f0;
  --light-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ========== Light Theme (App) ========== */
[data-theme="light"] {
  /* Core Light Palette
     - #FFFFFF - Primary background (inputs, modals, chat area)
     - #F5F5F5 - Surface background (app, sidebar, accordions)
     - #E8E8E8 - Elevated surfaces (user bubble, file attachments)
     - #D1D5DB - Borders, dividers
     - #181818 - Primary text, icons
     - #5A5A5A - Muted text
     - #828282 - Buttons, inactive elements
     - #B45309 - Bold/emphasized text (amber)
  */
  --color-light-bg: #FFFFFF;
  --color-light-surface: #F5F5F5;
  --color-light-elevated: #E8E8E8;
  --color-light-border: #D1D5DB;
  --color-light-text: #181818;
  --color-light-muted: #5A5A5A;
  --color-light-button: #828282;
  --color-light-bold: #B45309;

  /* Backgrounds */
  --bg-app: #F5F5F5;
  --bg-dark-surface: #E8E8E8;
  --bg-chat-area: #FFFFFF;
  --bg-user-input: #F5F5F5;
  --bg-input-button: #181818;
  --bg-sidebar: #F5F5F5;
  --bg-sidebar-dark: #F5F5F5;
  --bg-input: #FFFFFF;
  --bg-hover: rgba(0, 0, 0, 0.03);
  --bg-hover-strong: rgba(0, 0, 0, 0.08);
  --bg-modal: rgba(255, 255, 255, 0.97);
  --gradient-sidebar: #F5F5F5;
  --gradient-sidebar-reverse: #F5F5F5;

  /* Text Colors */
  --text-primary: #181818;
  --text-secondary: #181818;
  --text-muted: #5A5A5A;
  --text-dim: #5A5A5A;
  --text-placeholder: rgba(24, 24, 24, 0.5);
  --text-gray: #5A5A5A;
  --chat-text: #181818;

  /* Icon Colors */
  --icon-default: #181818;

  /* Borders */
  --border-subtle: rgba(0, 0, 0, 0.05);
  --border-light: rgba(0, 0, 0, 0.1);
  --border-medium: rgba(0, 0, 0, 0.15);
  --border-dark: #D1D5DB;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);

  /* Cards */
  --bg-card: rgba(0, 0, 0, 0.02);
  --bg-card-hover: rgba(0, 0, 0, 0.04);

  /* Tutorial Bubble Colors (Light theme) */
  --tutorial-bg: #FFFFFF;
  --tutorial-text: #181818;
  --tutorial-border: rgba(0, 0, 0, 0.15);
  --tutorial-shadow: rgba(0, 0, 0, 0.15);
  --tutorial-button-bg: rgba(0, 0, 0, 0.08);
  --tutorial-button-hover: rgba(0, 0, 0, 0.12);
}

/* ========== Dark Theme (explicit) ========== */
[data-theme="dark"] {
  /* Same as root - dark is default */
  --bg-app: #181818;
  --bg-dark-surface: #181818;
  --bg-chat-area: #1A1A1A;
  --bg-user-input: #252525;
  --bg-input-button: #7A7A7A;
  --bg-sidebar: #181818;
  --bg-sidebar-dark: #181818;
  --bg-input: #1A1A1A;
  --bg-hover: rgba(255, 255, 255, 0.03);
  --bg-hover-strong: rgba(255, 255, 255, 0.1);
  --bg-modal: rgba(0, 0, 0, 0.97);
  --gradient-scrollbar: #181818;
  --gradient-sidebar: #181818;
  --gradient-sidebar-reverse: #181818;

  /* Text Colors */
  --text-primary: #FFFFFF;
  --text-secondary: #7A7A7A;
  --text-muted: #5A5A5A;
  --text-dim: #5A5A5A;
  --text-placeholder: rgba(255, 255, 255, 0.4);
  --text-gray: #5A5A5A;
  --chat-text: #cccccc;

  /* Icon Colors */
  --icon-default: #FFFFFF;

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-light: rgba(255, 255, 255, 0.1);
  --border-medium: rgba(255, 255, 255, 0.2);
  --border-dark: #5A5A5A;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.3);

  /* Cards */
  --bg-card: rgba(255, 255, 255, 0.03);
  --bg-card-hover: rgba(255, 255, 255, 0.05);

  /* Tutorial Bubble Colors (Dark theme) */
  --tutorial-bg: #1A1A1A;
  --tutorial-text: #FFFFFF;
  --tutorial-border: rgba(255, 255, 255, 0.2);
  --tutorial-shadow: rgba(0, 0, 0, 0.4);
  --tutorial-button-bg: rgba(255, 255, 255, 0.1);
  --tutorial-button-hover: rgba(255, 255, 255, 0.15);
}

/* Animatable CSS Custom Properties */
@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 140deg;
  inherits: false;
}