/**
 * EN: Global Styles with Tailwind CSS 4
 * VI: Styles toàn cục với Tailwind CSS 4
 *
 * Import theme variables first, then Tailwind directives
 * Import các biến theme trước, sau đó là các directives của Tailwind
 */
@import "../styles/theme.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

/**
 * EN: Theme CSS Variables - Dark Mode (Default)
 * VI: CSS Variables cho Theme - Dark Mode (Mặc định)
 */
:root {
  /* Background Colors */
  --bg-primary: #0A0A0A;
  --bg-secondary: #121212;
  --bg-tertiary: #1A1A1A;
  --bg-elevated: #242424;

  /* Text Colors */
  --text-primary: #FAFAFA;
  --text-secondary: #E0E0E0;
  --text-tertiary: #A0A0A0;
  --text-inverse: #1A1A1A;

  /* Brand/Accent Colors */
  --accent-primary: #3B82F6;
  --accent-secondary: #8B5CF6;
  --accent-success: #10B981;
  --accent-warning: #F59E0B;
  --accent-error: #EF4444;
  --accent-info: #06B6D4;

  /* Chat Specific Colors */
  --chat-user-bubble: #2563EB;
  --chat-ai-bubble: #374151;
  --chat-user-text: #FFFFFF;
  --chat-ai-text: #F3F4F6;
  --chat-timestamp: #9CA3AF;
  --chat-divider: #1F2937;

  /* Border Colors */
  --border-primary: #2A2A2A;
  --border-secondary: #3A3A3A;
  --border-focus: #3B82F6;

  /* Font Stack */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

  /* Type Scale */
  --text-6xl: 3.75rem;
  --text-5xl: 3rem;
  --text-4xl: 2.25rem;
  --text-3xl: 1.875rem;
  --text-2xl: 1.5rem;
  --text-xl: 1.25rem;
  --text-lg: 1.125rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Spacing Scale (Base: 4px) */
  --space-0: 0;
  --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;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  --chat-max-width: 768px;
  --sidebar-width: 280px;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.3);

  /* Animation Timing */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Duration */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;
}

/**
 * EN: Light Mode Theme Variables
 * VI: CSS Variables cho Light Mode
 */
:root.light {
  /* Background Colors */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F9FAFB;
  --bg-tertiary: #F3F4F6;
  --bg-elevated: #FFFFFF;

  /* Text Colors */
  --text-primary: #111827;
  --text-secondary: #4B5563;
  --text-tertiary: #9CA3AF;
  --text-inverse: #FAFAFA;

  /* Chat Specific Colors */
  --chat-user-bubble: #3B82F6;
  --chat-ai-bubble: #F3F4F6;
  --chat-user-text: #FFFFFF;
  --chat-ai-text: #111827;
  --chat-timestamp: #6B7280;
  --chat-divider: #E5E7EB;

  /* Border Colors */
  --border-primary: #E5E7EB;
  --border-secondary: #D1D5DB;
  --border-focus: #3B82F6;

  /* Shadows (lighter for light mode) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.2);
}

/**
 * EN: Base styles
 * VI: Styles cơ bản
 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--text-base);
  line-height: 1.5;
  transition: background-color var(--duration-normal) var(--ease-in-out),
              color var(--duration-normal) var(--ease-in-out);
}

/**
 * EN: Smooth transitions for theme switching
 * VI: Chuyển đổi mượt mà cho việc chuyển theme
 */
*,
*::before,
*::after {
  transition: background-color var(--duration-normal) var(--ease-in-out),
              color var(--duration-normal) var(--ease-in-out),
              border-color var(--duration-normal) var(--ease-in-out);
}