/* ==========================================================================
   VTI SENSOR DESIGN SYSTEM — TOKENS (tokens.css)
   Chuẩn mực B2B Deep-Tech cho thiết bị đo nhiệt độ lưới điện VTI Corp
   ========================================================================== */

:root {
  /* --- 1. MÀU SẮC THƯƠNG HIỆU & NỀN (BRAND & SURFACES) --- */
  /* Nền tối sâu thẳm - Deep Night Navy (Hero, Footer, Cách hoạt động, Liên hệ) */
  --vti-navy-dark: #071524;
  /* Bề mặt tối - Slate Surface (Card & dropdown menu trên nền tối) */
  --vti-navy-surface: #0d2238;
  --vti-navy-surface-hover: #132d4a;
  /* Xanh than thương hiệu VTI (Header, Brand accent, Tiêu đề nền sáng) */
  --vti-navy-brand: #113860;
  --vti-navy-light: #1b4b7c;

  /* Accent hổ phách nhiệt - Thermal Amber (Nút chính CTA, điểm nhấn năng lượng) */
  --vti-amber-warm: #e59324;
  --vti-amber-hover: #d28116;
  --vti-amber-subtle: rgba(229, 147, 36, 0.12);

  /* Cảnh báo nhiệt - Hotspot Indicator */
  --vti-red-hot: #e04838;
  --vti-red-subtle: rgba(224, 72, 56, 0.12);

  /* Lam đo lường vô tuyến - Cool Sensing Blue */
  --vti-cyan-cool: #0ea5e9;
  --vti-cyan-subtle: rgba(14, 165, 233, 0.12);

  /* Dải gradient nhiệt độ đặc trưng VTI (dùng cực kỳ tiết chế) */
  --vti-gradient-thermal: linear-gradient(90deg, #0ea5e9 0%, #e59324 50%, #e04838 100%);
  --vti-gradient-hero-glow: radial-gradient(circle at 60% 40%, rgba(229, 147, 36, 0.14) 0%, rgba(14, 165, 233, 0.08) 40%, transparent 70%);

  /* Nền & Bề mặt sáng (Light Theme) */
  --vti-bg-page: #f8fafc;
  --vti-bg-surface: #ffffff;
  --vti-bg-alt: #f1f5f9;
  --vti-bg-subtle: #edf2f7;

  /* Màu chữ (Typography colors) - Đạt chuẩn WCAG AA / AAA */
  --vti-text-ink: #0f172a;        /* Chữ chính nền sáng (contrast ~15.5:1) */
  --vti-text-muted: #475569;      /* Chữ phụ, đoạn lead (contrast ~6.8:1) */
  --vti-text-subtle: #64748b;     /* Ghi chú, caption */
  --vti-text-on-dark: #f8fafc;    /* Chữ chính nền tối (contrast ~16.2:1) */
  --vti-text-on-dark-muted: #94a3b8; /* Chữ phụ nền tối (contrast ~7.1:1) */

  /* Đường kẻ & Viền (Borders) */
  --vti-border: #e2e8f0;
  --vti-border-subtle: #edf2f7;
  --vti-border-dark: rgba(255, 255, 255, 0.12);
  --vti-border-dark-hover: rgba(255, 255, 255, 0.24);

  /* --- 2. TYPOGRAPHY SYSTEM --- */
  --vti-font-sans: 'Be Vietnam Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --vti-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Thang cỡ chữ Fluid clamp() */
  --vti-text-xs: 0.75rem;          /* 12px */
  --vti-text-sm: 0.875rem;         /* 14px */
  --vti-text-base: 1rem;           /* 16px */
  --vti-text-lg: 1.125rem;         /* 18px */
  --vti-text-xl: 1.25rem;          /* 20px */
  --vti-text-2xl: clamp(1.4rem, 2vw + 0.8rem, 1.75rem);   /* 22px -> 28px */
  --vti-text-3xl: clamp(1.65rem, 3.2vw + 0.2rem, 2.65rem); /* 26px -> 42px */
  --vti-text-4xl: clamp(1.85rem, 4.5vw + 0.5rem, 4.15rem); /* 29.6px -> 66px */
  --vti-stat-num: clamp(2.35rem, 5.2vw, 4.25rem);          /* 38px -> 68px */

  /* Line-height nghiêm ngặt cho tiếng Việt (chữ HOA có dấu >= 1.25) */
  --vti-leading-title: 1.25;
  --vti-leading-heading: 1.35;
  --vti-leading-body: 1.65;

  /* --- 3. BỐ CỤC LƯỚI & KHOẢNG CÁCH (SPACING SCALE 4/8px) --- */
  --vti-space-1: 4px;
  --vti-space-2: 8px;
  --vti-space-3: 12px;
  --vti-space-4: 16px;
  --vti-space-5: 20px;
  --vti-space-6: 24px;
  --vti-space-8: 32px;
  --vti-space-10: 40px;
  --vti-space-12: 48px;
  --vti-space-16: 64px;
  --vti-space-20: 80px;
  --vti-space-24: 96px;
  --vti-space-32: 128px;

  --vti-container-max: 1280px;
  --vti-container-padding: clamp(16px, 3.5vw, 32px);
  --vti-section-padding-y: clamp(72px, 8.5vw, 128px);

  /* --- 4. BO GÓC & BÓNG ĐỔ (RADII & SHADOWS) --- */
  --vti-radius-xs: 4px;
  --vti-radius-sm: 8px;
  --vti-radius-md: 12px;
  --vti-radius-lg: 16px;
  --vti-radius-xl: 20px;
  --vti-radius-full: 9999px;

  --vti-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --vti-shadow-md: 0 4px 14px -2px rgba(15, 23, 42, 0.08);
  --vti-shadow-lg: 0 12px 30px -4px rgba(15, 23, 42, 0.12);
  --vti-shadow-dark: 0 12px 32px -4px rgba(0, 0, 0, 0.35);
  --vti-shadow-amber: 0 4px 18px rgba(229, 147, 36, 0.35);

  /* --- 5. CHUYỂN ĐỘNG & TRANSITIONS --- */
  --vti-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --vti-transition-fast: 150ms var(--vti-ease);
  --vti-transition-base: 250ms var(--vti-ease);
  --vti-transition-slow: 400ms var(--vti-ease);

  /* Z-Index Scale */
  --vti-z-dropdown: 100;
  --vti-z-sticky: 200;
  --vti-z-header: 300;
  --vti-z-modal-backdrop: 400;
  --vti-z-modal: 500;
  --vti-z-toast: 600;
}

/* Tự động tắt chuyển động khi người dùng yêu cầu */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}