/**
 * 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 - Minimal Monochrome */
  --bg-primary: #000000;
  /* True Black */
  --bg-secondary: #111111;
  /* Near Black - Card/Panel */
  --bg-tertiary: #222222;
  /* Dark Gray */
  --bg-elevated: #333333;
  /* Elevated Gray */

  /* Text Colors (Highest Contrast) */
  --text-primary: #FFFFFF;
  /* Pure white */
  --text-secondary: #999999;
  /* Light Gray */
  --text-tertiary: #666666;
  /* Dark Gray */
  --text-muted: #444444;
  /* Muted */
  --text-inverse: #000000;
  /* Black */

  /* Brand/Accent Colors - Monochrome */
  --accent-primary: #FFFFFF;
  /* White */
  --accent-primary-hover: #CCCCCC;
  /* Light Gray */
  --accent-primary-light: #333333;
  /* Dark Gray */
  --accent-secondary: #333333;
  /* Dark grey */

  /* Functional Colors - Kept as monochrome variants or high contrast */
  --accent-success: #FFFFFF;
  /* Success = White (rely on icons) */
  --accent-warning: #CCCCCC;
  /* Warning = Gray */
  --accent-error: #FFFFFF;
  /* Error = White (rely on icons) */
  --accent-info: #FFFFFF;
  /* Info = White */

  /* Chat Specific Colors */
  --chat-user-bubble: #222222;
  --chat-ai-bubble: transparent;
  --chat-user-text: #FFFFFF;
  --chat-ai-text: #DDDDDD;
  --chat-timestamp: #666666;
  --chat-divider: #222222;

  /* Border Colors */
  --border-primary: #333333;
  --border-secondary: #444444;
  --border-focus: #FFFFFF;

  /* ============================================
     EN: Brand Colors (Monochrome)
     VI: Màu thương hiệu (Đơn sắc)
     ============================================ */

  /* Primary Brand Color */
  --brand-primary: #FFFFFF;
  --brand-primary-light: #CCCCCC;
  --brand-primary-dark: #999999;
  --brand-primary-contrast: #000000;

  /* Secondary Brand Color */
  --brand-secondary: #666666;
  --brand-secondary-light: #999999;
  --brand-secondary-dark: #333333;

  /* ============================================
     EN: Minimal Effects
     VI: Hiệu ứng tối giản
     ============================================ */

  /* Glass Backgrounds */
  --glass-bg-subtle: rgba(255, 255, 255, 0.02);
  --glass-bg-default: rgba(255, 255, 255, 0.05);
  --glass-bg-medium: rgba(255, 255, 255, 0.08);
  --glass-bg-hover: rgba(255, 255, 255, 0.1);
  --glass-bg-active: rgba(255, 255, 255, 0.15);

  /* Glass Borders */
  --glass-border-subtle: rgba(255, 255, 255, 0.1);
  --glass-border-default: rgba(255, 255, 255, 0.15);
  --glass-border-hover: rgba(255, 255, 255, 0.3);
  --glass-border-focus: rgba(255, 255, 255, 0.8);

  /* Shadows */
  --glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.8);
  --glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.9);
  --glass-shadow-lg: 0 8px 24px rgba(0, 0, 0, 1.0);
  --glass-shadow-inset: inset 0 1px 1px rgba(255, 255, 255, 0.1);

  --interactive-glass-rest: rgba(255, 255, 255, 0.05);
  --interactive-glass-hover: rgba(255, 255, 255, 0.1);
  --interactive-glass-active: rgba(255, 255, 255, 0.15);
  --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 {
  --bg-primary: #000000;
  --bg-secondary: #111111;
  --bg-tertiary: #222222;
  --bg-elevated: #333333;
  --text-primary: #FFFFFF;
  --text-secondary: #999999;
  --text-tertiary: #666666;
  --text-muted: #444444;
  --border-primary: #333333;
  --border-secondary: #444444;
  --border-focus: #FFFFFF;
  --accent-primary: #FFFFFF;
  --accent-primary-hover: #CCCCCC;
}

/* ============================================
   EN: Light Mode Theme (Explicit)
   VI: Theme Light Mode (Rõ ràng)
   ============================================ */
[data-theme="light"],
.light {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F5F5F5;
  --bg-tertiary: #E5E5E5;
  --bg-elevated: #DDDDDD;
  --text-primary: #000000;
  --text-secondary: #333333;
  --text-tertiary: #666666;
  --text-muted: #999999;
  --border-primary: #DDDDDD;
  --border-secondary: #CCCCCC;
  --border-focus: #000000;

  --accent-primary: #000000;
  --accent-primary-hover: #333333;

  --brand-primary: #000000;
  --brand-primary-light: #333333;
  --brand-primary-dark: #000000;
  --brand-primary-contrast: #FFFFFF;

  /* Glass effects adapted for light */
  --glass-bg-subtle: rgba(0, 0, 0, 0.02);
  --glass-bg-default: rgba(0, 0, 0, 0.03);
  --glass-bg-medium: rgba(0, 0, 0, 0.05);
  --glass-bg-hover: rgba(0, 0, 0, 0.08);
  --glass-bg-active: rgba(0, 0, 0, 0.12);

  --glass-border-subtle: rgba(0, 0, 0, 0.05);
  --glass-border-default: rgba(0, 0, 0, 0.1);
  --glass-border-hover: rgba(0, 0, 0, 0.2);
  --glass-border-focus: rgba(0, 0, 0, 0.8);

  --glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --glass-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
}