/**
 * VNPT TP.HỒ CHÍ MINH — DESIGN SYSTEM 2026
 * File: assets/css/tokens.css
 * Chuẩn nhận diện: VNPT MODERN TECH BLUE 2026
 * Bản quyền thuộc về VNPT TP.Hồ Chí Minh (vnpthcm.net)
 */

:root {
  /* ==========================================================================
     1. BRAND COLORS (MÀU SẮC THƯƠNG HIỆU CHỦ ĐẠO)
     Tỷ lệ chuẩn: 70% Nền sáng - 20% Xanh VNPT - 10% Điểm nhấn
     ========================================================================== */
  --vnpt-primary: #0068ff;         /* Xanh công nghệ VNPT chủ đạo */
  --vnpt-electric-blue: #168bff;  /* Xanh điện tử hiện đại */
  --vnpt-primary-dark: #0052cc;   /* Xanh đậm tương tác */
  --vnpt-dark-blue: #0047b9;      /* Xanh chiều sâu */
  --vnpt-navy: #082e6b;           /* Xanh Navy doanh nghiệp */
  --vnpt-dark-navy: #071f46;      /* Nền tối Dark Tech & Footer */
  --vnpt-cyan: #22b8ff;           /* Điểm nhấn Cyan công nghệ */

  /* ==========================================================================
     2. STATUS & FEEDBACK COLORS (TRẠNG THÁI HỆ THỐNG)
     ========================================================================== */
  --vnpt-success: #16a34a;        /* Thành công, hoàn thành, online */
  --vnpt-success-bg: #f0fdf4;
  --vnpt-success-border: #bbf7d0;

  --vnpt-warning: #f59e0b;        /* Cảnh báo, lưu ý, hot badge */
  --vnpt-warning-bg: #fffbeb;
  --vnpt-warning-border: #fde68a;

  --vnpt-danger: #ef4444;         /* Khẩn cấp, hủy, lỗi, ưu đãi sốc */
  --vnpt-danger-bg: #fef2f2;
  --vnpt-danger-border: #fecaca;

  /* ==========================================================================
     3. SURFACES & NEUTRALS (BỀ MẶT & MÀU TRUNG TÍNH)
     ========================================================================== */
  --vnpt-text: #0f172a;           /* Chữ tiêu đề & nội dung chính (Độ tương phản cao) */
  --vnpt-text-secondary: #334155; /* Chữ mô tả, thông tin chi tiết */
  --vnpt-text-muted: #475569;     /* Chữ phụ đạt chuẩn tương phản WCAG 2.2 AA (7.0:1) */
  --vnpt-text-light: #94a3b8;     /* Chữ trên nền tối nhẹ */

  --vnpt-bg: #ffffff;             /* Nền trắng chuẩn */
  --vnpt-bg-soft: #f7faff;        /* Nền xanh phấn nhạt (Section Soft) */
  --vnpt-bg-light-blue: #f1f6ff;  /* Nền khối chức năng, highlight */
  --vnpt-bg-section-blue: #eaf4ff;/* Nền phân khu nhấn mạnh */
  --vnpt-bg-card: #ffffff;        /* Nền thẻ mặc định */
  
  --vnpt-border: #dce8f7;         /* Viền mỏng thanh lịch */
  --vnpt-border-subtle: #edf3fa;  /* Viền siêu nhẹ phân cách */
  --vnpt-border-focus: #0068ff;   /* Viền khi kích hoạt/focus */

  /* Focus ring dùng chung cho mọi control tương tác */
  --vnpt-focus-ring: 0 0 0 4px rgba(0, 104, 255, 0.16);
  --vnpt-focus-ring-dark: 0 0 0 4px rgba(34, 184, 255, 0.28);

  /* ==========================================================================
     4. GRADIENTS (DẢI MÀU CHUYỂN TIẾP CÔNG NGHỆ)
     Sử dụng có kiểm soát làm điểm nhấn, không lạm dụng tràn lan
     ========================================================================== */
  --vnpt-gradient-primary: linear-gradient(135deg, #168bff 0%, #0068ff 50%, #0047b9 100%);
  --vnpt-gradient-hero: linear-gradient(135deg, #ffffff 0%, #f4f8ff 50%, #eaf4ff 100%);
  --vnpt-gradient-dark: linear-gradient(135deg, #082e6b 0%, #0052cc 100%);
  --vnpt-gradient-card: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  --vnpt-gradient-glow: radial-gradient(circle at 50% 50%, rgba(34, 184, 255, 0.18), transparent 70%);
  --vnpt-gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  --vnpt-gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --vnpt-gradient-info: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  --vnpt-gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

  /* ==========================================================================
     5. SPACING SYSTEM (HỆ THỐNG KHOẢNG CÁCH ĐỒNG BỘ)
     ========================================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ==========================================================================
     6. CORNER RADIUS (BO GÓC HIỆN ĐẠI / SOFT UI)
     ========================================================================== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-hero: 32px;
  --radius-pill: 999px;

  /* ==========================================================================
     7. ELEVATION & SHADOWS (ĐỘ NỔI VÀ ĐỔ BÓNG CÔNG NGHỆ)
     ========================================================================== */
  --shadow-sm: 0 2px 8px rgba(0, 50, 120, 0.04);
  --shadow-card: 0 1px 3px 0 rgba(0, 50, 120, 0.04), 0 8px 24px -4px rgba(0, 68, 160, 0.08);
  --shadow-card-hover: 0 4px 6px -1px rgba(0, 50, 120, 0.04), 0 16px 36px -6px rgba(0, 89, 210, 0.14);
  --shadow-floating: 0 20px 50px rgba(0, 74, 180, 0.16);
  --shadow-btn: 0 8px 20px rgba(0, 104, 255, 0.28);
  --shadow-btn-hover: 0 12px 28px rgba(0, 104, 255, 0.38);

  /* ==========================================================================
     8. TYPOGRAPHY (KIỂU CHỮ VÀ PHÂN CẤP KÍCH THƯỚC FLUID)
     ========================================================================== */
  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans: var(--font-body);
  
  --text-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);    /* 11px - 12px */
  --text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);   /* 13px - 14px */
  --text-base: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);      /* 15px - 16px */
  --text-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);      /* 17px - 18px */
  --text-xl: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem);      /* 20px - 22px */
  --text-2xl: clamp(1.5rem, 1.35rem + 0.6vw, 1.75rem);       /* 24px - 28px */
  --text-3xl: clamp(1.875rem, 1.65rem + 0.9vw, 2.25rem);     /* 30px - 36px */
  --text-4xl: clamp(2.25rem, 1.95rem + 1.2vw, 2.75rem);     /* 36px - 44px */
  --text-h1: clamp(2.375rem, 1.85rem + 2.2vw, 3.375rem);     /* 38px - 54px */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.2;
  --line-height-heading: 1.25;
  --line-height-body: 1.65;

  /* ==========================================================================
     9. BACKWARD COMPATIBILITY ALIASES (ÁNH XẠ TƯƠNG THÍCH NGƯỢC)
     Bảo toàn hoạt động cho các trang chưa nâng cấp
     ========================================================================== */
  --site-blue: var(--vnpt-primary);
  --site-blue-dark: var(--vnpt-dark-navy);
  --site-ink: var(--vnpt-text);
  --site-line: var(--vnpt-border);
  --vnpt-blue: var(--vnpt-primary);
  --vnpt-accent: var(--vnpt-electric-blue);
  --vnpt-dark: var(--vnpt-dark-navy);
  --vnpt-ink: var(--vnpt-text);
  --vnpt-muted: var(--vnpt-text-muted);
  --vnpt-light: var(--vnpt-bg-soft);
  --vnpt-border-color: var(--vnpt-border);
  --vnpt-card-radius: var(--radius-lg);
  --vnpt-transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  /* Tương thích với các trang legacy trong assets/css/style.css.
     Các alias này chỉ trỏ về design token chuẩn, không tạo thêm hệ màu riêng. */
  --vnpt-font-sans: var(--font-sans);
  --vnpt-red: var(--vnpt-danger);
  --vnpt-text-caption: var(--text-xs);
  --vnpt-text-meta: var(--text-sm);
  --vnpt-text-card: var(--text-sm);
  --vnpt-text-body: var(--text-base);
  --vnpt-title-card: var(--text-lg);
  --vnpt-title-h3: var(--text-2xl);
  --vnpt-title-h2: var(--text-3xl);
  --vnpt-title-h1: var(--text-h1);

  /* ==========================================================================
     10. LAYOUT & CONTAINER TOKENS (HỆ THỐNG KHUNG CHỨA VÀ KHOẢNG ĐỆM)
     ========================================================================== */
  --container-max-width: 1240px;
  --container-narrow-max-width: 860px;
  --gutter-desktop: 24px;
  --gutter-mobile: 16px;

  /* Aliases for typography & line heights */
  --leading-tight: var(--line-height-tight, 1.25);
  --leading-normal: 1.5;
  --leading-relaxed: var(--line-height-body, 1.65);
  --leading-loose: 1.75;
  --text-md: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
}