/**
 * VOLET Design Tokens – 05.11.15 + 05.12 + 14.01/14.03 (Redesign: brand TÍM + iOS-native)
 * Color, Typography, Spacing, Radius, Shadow, Motion, Icon, Blur material.
 * Dev dùng var(--token); không hardcode.
 * Design language chuẩn: 14.01_DESIGN_LANGUAGE_DECISION_RECORD (FINAL) — brand TÍM #6D28D9,
 * business accent XANH #2563EB (chỉ ngữ cảnh Doanh nghiệp), semantic iOS palette.
 * Phân vai (14.03/14.11): consumer+admin = primary TÍM; business+B2B = --biz-* XANH.
 * Tôn chỉ web (14.04): màn dày dữ liệu (admin/trust) tiết chế gradient/animation — vẫn brand tím.
 */

:root {
  color-scheme: light;
  /* ---------- 1. COLOR ---------- */
  /* Neutral (14.03 §4.3): nền ám tím nhẹ theo demo (không slate trung tính cũ) */
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-surface-2: #f4f4f6;
  --color-text: #0f0a23;
  --color-text-2: #6b6880;
  --color-text-muted: #a09db8; /* = tertiary; 2.6:1 — CHỈ trang trí (chevron/timestamp/placeholder), KHÔNG cho nội dung đọc (14.03 §4.10) */
  --color-border: #e8e6f0;
  --color-border-strong: #d6d2e4;
  /* Viền cho control tương tác idle (chip/filter bỏ-chọn): ≥3:1 vs surface theo WCAG 1.4.11 (UI 1.4.11). 3.46:1 vs #fff, 3.15:1 vs surface-2. */
  --color-border-interactive: #8b87a0;

  /* Brand scale TÍM (14.03 §4.1) — nguồn: volet_demo/css/variables.css */
  --volet-900: #2e1065;
  --volet-800: #3b0764;
  --volet-700: #4c1d95;
  --volet-600: #5b21b6;
  --volet-500: #6d28d9;
  --volet-400: #7c3aed;
  --volet-300: #8b5cf6;
  --volet-200: #a78bfa;
  --volet-100: #ddd6fe;
  --volet-50:  #f5f3ff;

  /* Primary (TÍM): nhận diện thương hiệu Volet (consumer + admin) */
  --color-primary: var(--volet-500);
  --color-primary-hover: var(--volet-600);
  --color-primary-50: var(--volet-50);
  --color-on-primary: #ffffff; /* light: fill #6D28D9 + chữ trắng 7.1:1. Dark override riêng ở block [data-theme="dark"] (M3 option B, 14.03 §4.10) */

  /* CTA primary gradient (CHỐT 2026-07, demo components.css .btn-primary thắng). Điểm cuối per-scope
     qua --color-primary-grad-end; điểm sáng nhất gradient = --color-primary → contrast on-primary giữ nguyên. */
  --color-primary-grad-end: var(--volet-700);
  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-grad-end));

  /* Accent = primary (tím) mặc định; scope business override sang --biz-500 (14.03 §4.11) */
  --color-accent: var(--color-primary);
  /* DEPRECATED khỏi vai CTA (14.01/14.03): cam chỉ còn dùng trong logo wordmark (--logo-*), giữ tạm tới Phase 7 (OQ-1) */
  --color-accent-orange: #ea580c;
  --color-accent-orange-hover: #c2410c;
  --color-accent-orange-50: #ffedd5;

  --color-secondary: var(--volet-400);
  --color-secondary-50: #ede9fe;

  /* Business accent XANH (14.03 §4.2) — chỉ ngữ cảnh workspace Doanh nghiệp / B2B */
  --biz-500: #2563eb;
  --biz-700: #1d4ed8; /* điểm cuối gradient CTA business (= --color-primary-hover business) */
  --biz-400: #0ea5e9; /* ⚠️ KHÔNG làm nền chữ trắng (2.8:1); chỉ gradient-end/accent-line/icon */
  --biz-50: #eaf1fe;  /* nền chip/badge/focus-ring business (đối xứng --volet-50) */
  --color-on-biz: #ffffff;
  --biz-badge-bg: #eaf1fe;
  --biz-badge-text: #1e3a8a;

  /* Semantic — iOS system palette (14.03 §4.4) */
  --color-success: #34c759;
  --color-success-bg: #e6f9ec;
  --color-warning: #ff9500;
  --color-warning-bg: #fff2e0;
  --color-error: #ff3b30;
  --color-error-bg: #ffe8e6;
  --color-info: #0ea5e9; /* thông báo hệ thống — KHÔNG gộp với --biz-400 dù gần màu (14.03 §4.2) */
  --color-info-bg: #e0f2fe;
  --color-on-semantic: #ffffff;
  /* Chữ badge semantic trên nền tint pastel — darken để đạt WCAG AA ≥4.5:1 (14.08 §3).
     Raw --color-success/warning/error FAIL AA trên nền -bg (2.0–3.0:1); chỉ dùng cho fill/icon/UI. */
  --color-success-text: #1e7334; /* / #e6f9ec = 5.38:1 ✓ */
  --color-warning-text: #945600; /* / #fff2e0 = 5.30:1 ✓ */
  --color-error-text: #c7261c;   /* / #ffe8e6 = 4.82:1 ✓ */
  --color-info-text: #0369a1;    /* / #e0f2fe = 5.17:1 ✓ (raw --color-info 2.42 FAIL) */

  /* Contrast (05.11.16.03): placeholder dùng text-2, không text-muted. */
  --color-placeholder: var(--color-text-2);

  /* Logo wordmark: GIỮ orange+blue tạm thời (OQ-1 RESOLVED — quyết logo cuối ở Phase 7) */
  --logo-blue-dark: #1d4ed8;
  --logo-blue-light: #3b82f6;
  --logo-orange-dark: #ea580c;
  --logo-orange-light: #fb923c;
  --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);
  --color-footer-bg: #1e3a8a; /* GIỮ tạm (brand asset — Phase 7) */

  /* Tier / gamification (14.03 §4.5) — nguồn demo */
  --tier-bronze: linear-gradient(135deg, #cd7f32, #a0612a);
  --tier-silver: linear-gradient(135deg, #d8d8d8, #a8a8b0);
  --tier-gold: linear-gradient(135deg, #ffd700, #e0a800);
  --tier-diamond: linear-gradient(135deg, #b9f2ff, #a78bfa);
  --medal-bronze: #cd7f32;
  --medal-silver: #9aa3b2;
  --medal-gold: #e0a100;
  --medal-diamond: #22c1dc;
  --key-gold: #e0a100; /* currency "Khoá" */
  --flame: #ff6b35;    /* streak */
  --snow: #38bdf8;     /* streak freeze */

  /* ---------- 2. TYPOGRAPHY (system-native — khớp demo variables.css:42) ---------- */
  /* CHỐT 2026-07 (demo thắng, lật 05.11.15.02/14.01): heading dùng font hệ thống, KHÔNG Space Grotesk.
     Logo là SVG wordmark (--logo-*) → không cần font brand riêng ⇒ Space Grotesk gỡ hẳn khỏi web. */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;

  --text-large-title: 2.125rem; /* 34px — iOS large-title nav (14.03 §4.6) */
  --text-h1: 2rem;
  --text-h2: 1.5rem;
  --text-h3: 1.25rem;
  --text-h4: 1.125rem;
  --text-body-lg: 1rem;
  --text-body: 0.9375rem; /* 15px */
  --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 ---------- */
  --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 ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px; /* sheet/hero (14.03 §4.7) */
  --radius-nav: 14px;
  --radius-btn: 8px;
  --radius-chip: 9999px;

  /* Shadow — trung tính, mềm (14.03 §4.8: bỏ tint slate/tím) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10);
  --shadow-float: 0 2px 8px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.10); /* CTA nổi (demo variables.css:61) */
  --shadow-dropdown: 0 14px 38px rgba(0, 0, 0, 0.12);
  --shadow-header: 0 8px 30px rgba(0, 0, 0, 0.08);

  --color-overlay: rgba(15, 10, 35, 0.4);

  /* ---------- 4b. BLUR MATERIAL (iOS, 14.03 §4.8) ---------- */
  --mat-thin-blur: 12px;
  --mat-thin-bg: rgba(255, 255, 255, 0.6);
  --mat-regular-blur: 20px;
  --mat-regular-bg: rgba(255, 255, 255, 0.82);
  --mat-thick-blur: 30px;
  --mat-thick-bg: rgba(255, 255, 255, 0.92);

  /* Safe area */
  --sa-bottom: env(safe-area-inset-bottom, 0px);

  /* ---------- 5. MOTION ---------- */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 220ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* sheet/tab, overshoot nhẹ */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);      /* chuyển tab/segmented */

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

/* ---------- Business scope: accent → XANH (14.03 §4.11) ---------- */
/* Áp cho gốc scope Doanh nghiệp/B2B (body class hoặc container) để không sửa từng call-site. */
.ctx-business,
[data-workspace="business"] {
  --color-accent: var(--biz-500);
  --color-primary: var(--biz-500);
  --color-primary-hover: #1d4ed8;
  --color-primary-50: var(--biz-50);
  --color-on-primary: var(--color-on-biz);
  --color-primary-grad-end: var(--biz-700); /* CTA gradient xanh biz-500→biz-700 */
}

/* Dark mode – 05.11.15.07 + 14.03 §4.9. Nền tím-tối theo demo. */
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0b0712;
  --color-surface: #15101f;
  --color-surface-2: #1e1830;
  --color-text: #f5f3ff;
  --color-text-2: #a89fc0;
  --color-text-muted: #6b6483; /* 3.3:1 — trang trí/UI only */
  --color-border: #2a2340;
  --color-border-strong: #3a3152;
  --color-border-interactive: #726b8c; /* 3.73:1 vs surface, 3.42:1 vs surface-2 (WCAG 1.4.11) */

  /* Dark: M3 option B (14.03 §4.10) — primary = tím SÁNG #A78BFA (accent-on-dark 7.4:1 ✓),
     on-primary = tím ĐẬM #2E1065 (chữ trên fill sáng ~6.7:1 ✓). Token dùng làm fill lẫn foreground đều đạt. */
  --color-primary: var(--volet-200);
  --color-primary-hover: var(--volet-300);
  --color-primary-50: rgba(109, 40, 217, 0.24);
  --color-on-primary: var(--volet-900);
  --color-accent: var(--color-primary);
  --color-accent-text-dark: var(--volet-200); /* alias giữ tương thích code cũ */
  /* M3 option B: primary = tím SÁNG + chữ tím ĐẬM ⇒ gradient đi về phía SÁNG hơn (volet-100)
     để giữ chữ on-primary ≥AA (darkest point = volet-200 + chữ volet-900 = 5.6:1 ✓). */
  --color-primary-grad-end: var(--volet-100);

  --color-secondary: var(--volet-300);
  --color-secondary-50: rgba(139, 92, 246, 0.2);

  /* Business dark */
  --biz-500: #60a5fa;
  --biz-50: rgba(96, 165, 250, 0.18);
  --color-on-biz: #0b1220;
  --biz-badge-bg: rgba(96, 165, 250, 0.2);
  --biz-badge-text: #bfdbfe;

  --color-accent-orange: #fb923c;
  --color-accent-orange-hover: #ea580c;
  --color-accent-orange-50: rgba(251, 146, 60, 0.2);

  /* Semantic bg tối */
  --color-success-bg: rgba(52, 199, 89, 0.2);
  --color-warning-bg: rgba(255, 149, 0, 0.2);
  --color-error-bg: rgba(255, 59, 48, 0.2);
  --color-info-bg: rgba(14, 165, 233, 0.2);

  /* Chữ badge semantic dark — giữ chữ sáng demo (14.08 §3): 7.85 / 7.61 / 5.35:1 ✓ */
  --color-success-text: #5ce08a;
  --color-warning-text: #ffb84d;
  --color-error-text: #ff6b61;
  --color-info-text: #0ea5e9; /* / info-bg tối = 5.02:1 ✓ */

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.5); /* CTA nổi dark (demo variables.css:103) */
  --shadow-dropdown: 0 14px 38px rgba(0, 0, 0, 0.5);
  --shadow-header: 0 8px 30px rgba(0, 0, 0, 0.45);
  --color-overlay: rgba(0, 0, 0, 0.55);

  /* Blur material dark */
  --mat-thin-bg: rgba(21, 16, 31, 0.6);
  --mat-regular-bg: rgba(15, 10, 35, 0.78);
  --mat-thick-bg: rgba(11, 7, 18, 0.9);

  --key-gold: #f5c542;
}

/* Business scope trong dark: accent xanh dark */
[data-theme="dark"] .ctx-business,
[data-theme="dark"] [data-workspace="business"] {
  --color-primary: var(--biz-500);
  --color-primary-hover: #93c5fd;
  --color-primary-50: var(--biz-50);
  --color-accent: var(--biz-500);
  --color-on-primary: var(--color-on-biz);
  --color-primary-grad-end: #93c5fd; /* biz sáng hơn → giữ chữ on-biz đậm ≥AA (darkest = biz-500 = 7.4:1 ✓) */
}

/* data-theme="auto" (Django admin): theo prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    color-scheme: dark;
    --color-bg: #0b0712;
    --color-surface: #15101f;
    --color-surface-2: #1e1830;
    --color-text: #f5f3ff;
    --color-text-2: #a89fc0;
    --color-text-muted: #6b6483;
    --color-border: #2a2340;
    --color-border-strong: #3a3152;
    --color-border-interactive: #726b8c;
    --color-primary: var(--volet-200);
    --color-primary-hover: var(--volet-300);
    --color-primary-50: rgba(109, 40, 217, 0.24);
    --color-on-primary: var(--volet-900);
    --color-accent: var(--color-primary);
    --color-accent-text-dark: var(--volet-200);
    --color-primary-grad-end: var(--volet-100);
    --color-secondary: var(--volet-300);
    --color-secondary-50: rgba(139, 92, 246, 0.2);
    --biz-500: #60a5fa;
    --biz-50: rgba(96, 165, 250, 0.18);
    --color-on-biz: #0b1220;
    --biz-badge-bg: rgba(96, 165, 250, 0.2);
    --biz-badge-text: #bfdbfe;
    --color-accent-orange: #fb923c;
    --color-accent-orange-hover: #ea580c;
    --color-accent-orange-50: rgba(251, 146, 60, 0.2);
    --color-success-bg: rgba(52, 199, 89, 0.2);
    --color-warning-bg: rgba(255, 149, 0, 0.2);
    --color-error-bg: rgba(255, 59, 48, 0.2);
    --color-info-bg: rgba(14, 165, 233, 0.2);
    --color-success-text: #5ce08a;
    --color-warning-text: #ffb84d;
    --color-error-text: #ff6b61;
    --color-info-text: #0ea5e9; /* / info-bg tối = 5.02:1 ✓ */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-dropdown: 0 14px 38px rgba(0, 0, 0, 0.5);
    --shadow-header: 0 8px 30px rgba(0, 0, 0, 0.45);
    --color-overlay: rgba(0, 0, 0, 0.55);
    --mat-thin-bg: rgba(21, 16, 31, 0.6);
    --mat-regular-bg: rgba(15, 10, 35, 0.78);
    --mat-thick-bg: rgba(11, 7, 18, 0.9);
    --key-gold: #f5c542;
  }
}