/**
 * EN: Design System Theme Tokens
 * VI: Các token thiết kế cho Design System
 *
 * This file contains all CSS custom properties (variables) for the design system,
 * including colors, typography, spacing, layout, animations, and more.
 * These tokens are used throughout the application and can be referenced in Tailwind CSS
 * utility classes via the tailwind.config.js configuration.
 *
 * File này chứa tất cả các CSS custom properties (biến) cho design system,
 * bao gồm màu sắc, typography, spacing, layout, animations, và nhiều hơn nữa.
 * Các token này được sử dụng trong toàn bộ ứng dụng và có thể được tham chiếu trong
 * các utility classes của Tailwind CSS thông qua cấu hình tailwind.config.js.
 */

:root {
   /* ============================================
     EN: Color Palette - Dark Mode (Primary Theme)
     VI: Bảng màu - Dark Mode (Theme chính)
     ============================================ */

   /* Background Colors - X.ai Minimal / Màu nền - X.ai Minimal */
   --bg-primary: #15202b;
   /* Warm dark gray - Main background (X.ai style) */
   --bg-secondary: #1a2734;
   /* Warm dark gray lighter - Card/Panel background */
   --bg-tertiary: #1f2f3d;
   /* Warm dark gray medium - Hover states */
   --bg-elevated: #243442;
   /* Warm dark gray elevated - Modals, dropdowns */

   /* Text Colors (WCAG Compliant) - X.ai Minimal / Màu chữ (tuân thủ WCAG) - X.ai Minimal */
   --text-primary: #FFFFFF;
   /* Pure white - Primary text */
   --text-secondary: #8899A6;
   /* X.ai gray - Secondary text (labels, descriptions) */
   --text-tertiary: #657786;
   /* X.ai dark gray - Tertiary text (captions, footnotes) */
   --text-muted: #505050;
   /* Dark grey - Muted elements */
   --text-inverse: #000000;
   /* Black - Text on light/white backgrounds */

   /* Brand/Accent Colors - X.ai Blue / Màu thương hiệu/Accent - X.ai Blue */
   --accent-primary: #1D9BF0;
   /* X.ai blue - Primary actions, links, focus */
   --accent-primary-hover: #1a8cd8;
   /* X.ai blue darker - Hover states */
   --accent-primary-light: #8ecdf7;
   /* X.ai blue lighter - Light accents */
   --accent-secondary: #333333;
   /* Dark grey - Secondary actions */
   --accent-success: #10B981;
   /* Green - Success states */
   --accent-warning: #F59E0B;
   /* Amber - Warnings */
   --accent-error: #EF4444;
   /* Red - Errors */
   --accent-info: #06B6D4;
   /* Cyan - Info */

   /* Chat Specific Colors / Màu riêng cho Chat */
   --chat-user-bubble: #1A1A1A;
   /* Dark grey - User message */
   --chat-ai-bubble: transparent;
   /* Transparent - AI message (Minimal) */
   --chat-user-text: #FFFFFF;
   /* White text */
   --chat-ai-text: #E5E5E5;
   /* Off-white text */
   --chat-timestamp: #555555;
   /* Dark grey timestamp */
   --chat-divider: #222222;
   /* Divider between messages */

   /* Border Colors - X.ai Minimal / Màu viền - X.ai Minimal */
   --border-primary: #222222;
   /* Subtle borders */
   --border-secondary: #333333;
   /* Hover borders */
   --border-focus: #1D9BF0;
   /* Focus state - X.ai blue */

   /* ============================================
     EN: X.ai Brand Colors (2026 Minimal)
     VI: Màu thương hiệu X.ai (2026 Minimal)
     ============================================ */

   /* Primary Brand Color - X.ai Blue */
   --brand-primary: #1D9BF0;
   /* X.ai blue - Main brand color */
   --brand-primary-light: #8ecdf7;
   /* X.ai blue light */
   --brand-primary-dark: #1a8cd8;
   /* X.ai blue dark */
   --brand-primary-contrast: #FFFFFF;
   /* White text on X.ai blue */

   /* Secondary Brand Color - Warm dark gray */
   --brand-secondary: #8899A6;
   /* X.ai gray */
   --brand-secondary-light: #AAAAAA;
   --brand-secondary-dark: #657786;
   /* X.ai dark gray */

   /* No gradients - X.ai Minimalism uses solid colors only */

   /* ============================================
     EN: Minimal Effects (x.ai Clean Style)
     VI: Hiệu ứng tối giản (Phong cách x.ai sạch sẽ)
     ============================================ */

   /* Glass Backgrounds - X.ai Ultra Minimal (2-5% opacity) */
   --glass-bg-subtle: rgba(255, 255, 255, 0.01);
   /* Ultra subtle - For minimal effect */
   --glass-bg-default: rgba(255, 255, 255, 0.04);
   /* Default X.ai minimal background (4%) */
   --glass-bg-medium: rgba(255, 255, 255, 0.05);
   /* Medium minimal effect */
   --glass-bg-hover: rgba(255, 255, 255, 0.06);
   /* Hover state */
   --glass-bg-active: rgba(255, 255, 255, 0.08);
   /* Active/pressed state */

   /* Glass Borders - X.ai Subtle */
   --glass-border-subtle: rgba(255, 255, 255, 0.05);
   /* Very subtle border */
   --glass-border-default: rgba(255, 255, 255, 0.08);
   /* Default X.ai border (8%) */
   --glass-border-hover: rgba(255, 255, 255, 0.12);
   /* Hover border */
   --glass-border-focus: rgba(29, 155, 240, 0.5);
   /* Focus state - X.ai blue (50%) */

   /* Backdrop Blur Levels - X.ai Minimal (Reduced) */
   --glass-blur-sm: 4px;
   /* Small blur - for inputs */
   --glass-blur-md: 8px;
   /* Medium blur - X.ai default (reduced from 16px) */
   --glass-blur-lg: 12px;
   /* Large blur - cards only */
   --glass-blur-xl: 12px;
   /* Max blur - X.ai keeps it subtle (reduced from 16px) */

   /* Glass Shadows - Dark mode optimized */
   --glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
   --glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
   --glass-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
   --glass-shadow-inset: inset 0 1px 1px rgba(255, 255, 255, 0.1);
   /* Inner highlight */

   /* Interactive Glass States */
   --interactive-glass-rest: rgba(255, 255, 255, 0.04);
   --interactive-glass-hover: rgba(255, 255, 255, 0.08);
   --interactive-glass-active: rgba(255, 255, 255, 0.12);
   --interactive-glass-disabled: rgba(255, 255, 255, 0.02);

   /* Legacy support - keeping old variables for backward compatibility */
   --glass-bg: var(--glass-bg-default);
   --glass-border: var(--glass-border-default);
   --glass-blur: var(--glass-blur-md);

   /* ============================================
     EN: Removed - Extended Shadows (X.ai Minimalist)
     VI: Đã xóa - Extended Shadows (X.ai Minimalist)
     ============================================ */
   /* Removed brand shadows for minimalist approach */
   /* Use --shadow or --shadow-lg instead */

   /* ============================================
     EN: Light Mode Colors (Secondary Theme)
     VI: Màu sắc cho Light Mode (Theme phụ)
     ============================================ */
   --bg-primary-light: #FFFFFF;
   --bg-secondary-light: #FBFBFD;
   /* Apple Gray */
   --bg-tertiary-light: #F5F5F7;
   --text-primary-light: #1D1D1F;
   /* Apple Black */
   --text-secondary-light: #86868B;
   /* Apple Gray Text */
   --border-primary-light: #D2D2D7;

   /* ============================================
     EN: Typography
     VI: Kiểu chữ
     ============================================ */

   /* Font Stack / Bộ font */
   --font-sans: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --font-mono: "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

   /* Display Font - For hero titles (48px+) */
   --font-display: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

   /* Heading Font - For section headings (24-36px) */
   --font-heading: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

   /* Type Scale - Clean minimal approach */
   --text-6xl: 3.5rem;
   /* 56px - Hero titles */
   --text-5xl: 2.75rem;
   /* 44px - Page titles */
   --text-4xl: 2.25rem;
   /* 36px - Section headers */
   --text-3xl: 1.75rem;
   /* 28px - Card headers */
   --text-2xl: 1.5rem;
   /* 24px - Large body */
   --text-xl: 1.25rem;
   /* 20px - Emphasized text */
   --text-lg: 1.125rem;
   /* 18px - Large body */
   --text-base: 1rem;
   /* 16px - Default body */
   --text-sm: 0.875rem;
   /* 14px - Small text */
   --text-xs: 0.75rem;
   /* 12px - Captions */

   /* Line Heights / Chiều cao dòng */
   --leading-none: 1;
   --leading-tight: 1.1;
   --leading-snug: 1.2;
   --leading-normal: 1.5;
   --leading-relaxed: 1.625;
   --leading-loose: 2;

   /* Font Weights - X.ai Minimalist (Bolder Impact) */
   --font-thin: 100;
   --font-extralight: 200;
   --font-light: 300;
   /* Light text */
   --font-normal: 400;
   /* Body text */
   --font-medium: 500;
   /* Emphasized */
   --font-semibold: 600;
   /* Headings */
   --font-bold: 700;
   /* Bold - stronger impact */
   --font-extrabold: 800;
   /* Extra bold - hero text */
   --font-black: 900;
   /* Black - maximum impact for titles */

   /* Letter Spacing - Clean Minimalist Look */
   --tracking-tighter: -0.04em;
   /* Very tight - for large display text */
   --tracking-tight: -0.02em;
   /* Tight - for headings */
   --tracking-normal: 0;
   /* Normal */
   --tracking-wide: 0.02em;
   /* Wide - for small caps */
   --tracking-wider: 0.04em;
   /* Wider - for emphasis */

   /* ============================================
     EN: Spacing & Layout
     VI: Khoảng cách & Bố cục
     ============================================ */

   /* Base Unit: 4px (0.25rem) / Đơn vị cơ sở: 4px (0.25rem) */
   --space-0: 0;
   --space-1: 0.25rem;
   /* 4px */
   --space-2: 0.5rem;
   /* 8px */
   --space-3: 0.75rem;
   /* 12px */
   --space-4: 1rem;
   /* 16px */
   --space-5: 1.25rem;
   /* 20px */
   --space-6: 1.5rem;
   /* 24px */
   --space-8: 2rem;
   /* 32px */
   --space-10: 2.5rem;
   /* 40px */
   --space-12: 3rem;
   /* 48px */
   --space-16: 4rem;
   /* 64px */
   --space-20: 5rem;
   /* 80px */

   /* Container Widths / Chiều rộng container */
   --container-sm: 640px;
   /* Small devices */
   --container-md: 768px;
   /* Medium devices */
   --container-lg: 1024px;
   /* Large devices */
   --container-xl: 1280px;
   /* Extra large */
   --container-2xl: 1536px;
   /* 2X large */
   --chat-max-width: 800px;
   /* Max width for chat messages */
   --sidebar-width: 280px;
   /* Conversation history sidebar */

   /* Mobile Layout / Layout Mobile */
   --mobile-header-height: 56px;
   /* Standard mobile header height */
   --mobile-bottom-nav-height: 64px;
   /* iOS/Android bottom nav height */
   --mobile-safe-area-top: env(safe-area-inset-top);
   /* iOS notch safe area */
   --mobile-safe-area-bottom: env(safe-area-inset-bottom);
   /* iOS home indicator safe area */

   /* Border Radius / Bo góc */
   --radius-sm: 2px;
   /* Small elements - sharp */
   --radius-md: 4px;
   /* Buttons, inputs - sharp */
   --radius-lg: 8px;
   /* Cards - minimal roundness */
   --radius-xl: 12px;
   /* Large cards */
   --radius-2xl: 16px;
   /* Modals */
   --radius-full: 9999px;
   /* Full round - Avatars, pills */

   /* ============================================
     EN: Shadows - X.ai Minimalist (Ultra Subtle)
     VI: Đổ bóng - X.ai Minimalist (Cực kỳ tinh tế)
     ============================================ */
   --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
   /* Default shadow - subtle */
   --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.6);
   /* Large shadow - for modals only */

   /* Legacy support - mapping to new shadows */
   --shadow-sm: var(--shadow);
   --shadow-md: var(--shadow);
   --shadow-xl: var(--shadow-lg);
   --shadow-glow: 0 0 8px rgba(255, 255, 255, 0.05);
   /* Minimal glow for focus */

   /* Brand shadows for brand buttons */
   --shadow-brand: 0 4px 16px rgba(29, 155, 240, 0.3);
   /* Brand shadow with X.ai blue glow */
   --shadow-brand-lg: 0 8px 24px rgba(29, 155, 240, 0.4);
   /* Large brand shadow */

   /* ============================================
     EN: Grid System & Breakpoints
     VI: Hệ thống lưới & Điểm ngắt
     ============================================ */
   --screen-sm: 640px;
   /* Mobile landscape */
   --screen-md: 768px;
   /* Tablet */
   --screen-lg: 1024px;
   /* Desktop */
   --screen-xl: 1280px;
   /* Large desktop */
   --screen-2xl: 1536px;
   /* Extra large desktop */

   /* ============================================
     EN: Animation & Transitions
     VI: Animation & Chuyển tiếp
     ============================================ */

   /* Timing Functions - X.ai Minimalist (Simplified) */
   --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   /* Smooth and natural - primary easing */
   --ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
   /* Snappy - for quick interactions */

   /* Legacy support - mapping to new easing */
   --ease-in: var(--ease-snap);
   --ease-out: var(--ease-snap);
   --ease-in-out: var(--ease-smooth);
   --motion-ease-smooth: var(--ease-smooth);
   --motion-ease-glide: var(--ease-snap);

   /* Duration - X.ai Minimalist (Faster, Snappier) */
   --duration-instant: 100ms;
   /* Instant feedback */
   --duration-fast: 150ms;
   /* Hover effects */
   --duration-normal: 200ms;
   /* Default transitions - FASTER */
   --duration-slow: 300ms;
   /* Complex animations - FASTER */

   /* Legacy support - mapping to new durations */
   --duration-slower: var(--duration-slow);
   --motion-duration-instant: var(--duration-instant);
   --motion-duration-quick: var(--duration-fast);
   --motion-duration-normal: var(--duration-normal);
   --motion-duration-smooth: var(--duration-slow);

   /* ============================================
     EN: Interactive States - X.ai Minimalist
     VI: Trạng thái tương tác - X.ai Minimalist
     ============================================ */

   /* Removed bounce/elastic - too playful for minimalism */

   /* Hover Scale - Minimal movement */
   --hover-scale-sm: 1.01;
   /* Barely noticeable */
   --hover-scale-md: 1.02;
   /* Subtle */

   /* Active Scale - For pressed states */
   --active-scale: 0.99;
   /* Minimal press feedback */
}

/* ============================================
   EN: Light Mode Theme Overrides
   VI: Ghi đè theme cho Light Mode
   ============================================ */
@media (prefers-color-scheme: light) {
   :root {
      --bg-primary: var(--bg-primary-light);
      --bg-secondary: var(--bg-secondary-light);
      --bg-tertiary: var(--bg-tertiary-light);
      --text-primary: var(--text-primary-light);
      --text-secondary: var(--text-secondary-light);
      --border-primary: var(--border-primary-light);
   }
}

/* ============================================
   EN: Dark Mode Theme (Explicit)
   VI: Theme Dark Mode (Rõ ràng)
   ============================================ */
[data-theme="dark"],
.dark {
   /* X.ai Minimal Dark Theme */
   --bg-primary: #15202b;
   /* Warm dark gray */
   --bg-secondary: #1a2734;
   --bg-tertiary: #1f2f3d;
   --bg-elevated: #243442;
   --text-primary: #FFFFFF;
   --text-secondary: #8899A6;
   /* X.ai gray */
   --text-tertiary: #657786;
   /* X.ai dark gray */
   --text-muted: #505050;
   --border-primary: #222222;
   --border-secondary: #333333;
   --border-focus: #1D9BF0;
   /* X.ai blue */
   --accent-primary: #1D9BF0;
   /* X.ai blue */
   --accent-primary-hover: #1a8cd8;
}

/* ============================================
   EN: Light Mode Theme (Explicit)
   VI: Theme Light Mode (Rõ ràng)
   ============================================ */
[data-theme="light"],
.light {
   /* X.ai Minimal Light Theme */
   --bg-primary: var(--bg-primary-light);
   --bg-secondary: var(--bg-secondary-light);
   --bg-tertiary: var(--bg-tertiary-light);
   --text-primary: var(--text-primary-light);
   --text-secondary: var(--text-secondary-light);
   --border-primary: var(--border-primary-light);
   --border-focus: #1D9BF0;
   /* X.ai blue stays in light mode */
   --accent-primary: #1D9BF0;
   /* X.ai blue */
   --accent-primary-hover: #1a8cd8;
   /* Glass effects adapted for light */
   --glass-bg-default: rgba(0, 0, 0, 0.04);
   --glass-border-default: rgba(0, 0, 0, 0.1);
}