/**
 * VOLET Design Tokens – 05.11.15 + 05.12 Web Design Language Spec
 * Color, Typography, Spacing, Radius, Shadow, Motion, Icon.
 * Dev dùng var(--token); không hardcode.
 * Tôn chỉ: Web Volet cần tạo niềm tin, không gây phấn khích.
 * Phân vai màu 05.12: primary (brand), neutral (nền/bảng), accent (CTA/trạng thái).
 */

:root {
  color-scheme: light;
  /* ---------- 1. COLOR (05.11.15.01 + 05.12) ---------- */
  /* Neutral: nền, khối thông tin, bảng biểu */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafc;
  --color-text: #0f172a;
  --color-text-2: #475569;
  --color-text-muted: #64748b;
  --color-border: rgba(15, 23, 42, 0.1);
  --color-border-strong: rgba(15, 23, 42, 0.16);

  /* Primary (xanh): nhận diện thương hiệu Volet */
  --color-primary: #3f5efb;
  --color-primary-hover: #2d4ae0;
  --color-primary-50: #eef2ff;
  /* Accent chính = primary (xanh); accent phụ = cam, kết hợp tránh giao diện nhạt */
  --color-accent: var(--color-primary);
  --color-accent-orange: #ea580c;
  --color-accent-orange-hover: #c2410c;
  --color-accent-orange-50: #ffedd5;

  --color-secondary: #6366f1;
  --color-secondary-50: #e0e7ff;

  --color-success: #22c55e;
  --color-success-bg: #dcfce7;
  --color-warning: #f59e0b;
  --color-warning-bg: #fef3c7;
  --color-error: #ef4444;
  --color-error-bg: #fee2e2;
  --color-info: #0ea5e9;
  --color-info-bg: #e0f2fe;

  /* Contrast (05.11.16.03): text/UI đọc được. Cặp chuẩn: text on bg, text-2 on surface, primary on primary-50. Placeholder dùng text-2, không text-muted. */
  --color-placeholder: var(--color-text-2);

  /* Logo wordmark: orange + blue, 4 màu đậm/nhạt (theo logo) */
  --logo-blue-dark: #1d4ed8;
  --logo-blue-light: #3b82f6;
  --logo-orange-dark: #ea580c;
  --logo-orange-light: #fb923c;
  /* Gán từng ký tự VOLET */
  --logo-v: var(--logo-blue-dark);
  --logo-o: var(--logo-blue-light);
  --logo-l: var(--logo-orange-dark);
  --logo-e: var(--logo-orange-light);
  --logo-t: var(--logo-blue-dark);
  /* Footer: nền xanh sẫm của logo (05.11.01.02) */
  --color-footer-bg: #1e3a8a;

  /* ---------- 2. TYPOGRAPHY (05.11.15.02 + 05.12) ---------- */
  /* Display/Heading: Space Grotesk; UI/Body: Inter. Chỉ 400, 500, 600. */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);

  --text-h1: 2rem;
  --text-h2: 1.5rem;
  --text-h3: 1.25rem;
  --text-h4: 1.125rem;
  --text-body-lg: 1rem;
  --text-body: 0.9375rem; /* 15px, ≥ 14px per 05.12 */
  --text-body-sm: 0.8125rem;
  --text-caption: 0.75rem;
  --text-body-min: 14px;

  --leading-tight: 1.25;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;

  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ---------- 3. SPACING & GRID (05.11.15.03) ---------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  --container-max: 1280px;
  --container-px: 2rem;

  /* ---------- 4. RADIUS & SHADOW (05.11.15.04) ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-nav: 14px;
  --radius-btn: 8px;
  --radius-chip: 9999px;

  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-dropdown: 0 14px 38px rgba(15, 23, 42, 0.12);
  --shadow-header: 0 10px 30px rgba(15, 23, 42, 0.08);

  --color-overlay: rgba(15, 23, 42, 0.4);

  /* ---------- 5. MOTION (05.11.15.06) ---------- */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);

  /* ---------- 6. ICON (05.11.15.05) ---------- */
  --icon-xs: 14px;
  --icon-sm: 18px;
  --icon-md: 22px;
  --icon-lg: 28px;
}

/* Dark mode – 05.11.15.07 (tóm tắt). Contrast 05.11.16.03: tránh trắng tinh; text sáng vừa trên nền tối. */
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-surface-2: #334155;
  --color-text: #e2e8f0;
  --color-text-2: #94a3b8;
  --color-text-muted: #94a3b8;
  --color-border: rgba(226, 232, 240, 0.12);
  --color-border-strong: rgba(226, 232, 240, 0.2);
  --color-primary: #6366f1;
  --color-primary-hover: #818cf8;
  --color-primary-50: rgba(99, 102, 241, 0.15);
  --color-accent: var(--color-primary);
  --color-accent-orange: #fb923c;
  --color-accent-orange-hover: #ea580c;
  --color-accent-orange-50: rgba(251, 146, 60, 0.2);
  /* Semantic backgrounds: tối hơn, không pastel sáng trên nền dark */
  --color-success-bg: rgba(34, 197, 94, 0.2);
  --color-warning-bg: rgba(245, 158, 11, 0.2);
  --color-error-bg: rgba(239, 68, 68, 0.2);
  --color-info-bg: rgba(14, 165, 233, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.3);
  --shadow-dropdown: 0 14px 38px rgba(0, 0, 0, 0.35);
  --shadow-header: 0 10px 30px rgba(0, 0, 0, 0.3);
  /* Overlay cho modal/drawer */
  --color-overlay: rgba(0, 0, 0, 0.5);
}

/* data-theme="auto" (Django admin): theo prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    color-scheme: dark;
    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-surface-2: #334155;
    --color-text: #e2e8f0;
    --color-text-2: #94a3b8;
    --color-text-muted: #94a3b8;
    --color-border: rgba(226, 232, 240, 0.12);
    --color-border-strong: rgba(226, 232, 240, 0.2);
    --color-primary: #6366f1;
    --color-primary-hover: #818cf8;
    --color-primary-50: rgba(99, 102, 241, 0.15);
    --color-accent: var(--color-primary);
    --color-accent-orange: #fb923c;
    --color-accent-orange-hover: #ea580c;
    --color-accent-orange-50: rgba(251, 146, 60, 0.2);
    --color-success-bg: rgba(34, 197, 94, 0.2);
    --color-warning-bg: rgba(245, 158, 11, 0.2);
    --color-error-bg: rgba(239, 68, 68, 0.2);
    --color-info-bg: rgba(14, 165, 233, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.3);
    --shadow-dropdown: 0 14px 38px rgba(0, 0, 0, 0.35);
    --shadow-header: 0 10px 30px rgba(0, 0, 0, 0.3);
    --color-overlay: rgba(0, 0, 0, 0.5);
  }
}