/**
 * assets/css/variables.css
 * Nguồn token thiết kế THẬT — mọi giá trị :root tại đây PHẢI khớp 1-1 với
 * fp_get_default_design_tokens() trong inc/hooks.php (tên biến suy ra trực
 * tiếp từ khoá mảng: --fp-{group}-{key}). Nếu thêm/sửa token, phải sửa CẢ
 * HAI nơi cùng lúc — đây là quy tắc kiến trúc bắt buộc, không có ngoại lệ.
 *
 * Giá trị runtime thật sự áp dụng lên trang sẽ bị ghi đè bởi CSS inline do
 * fp_generate_inline_css_variables() sinh ra (Customizer) — khối :root ở
 * đây chỉ là GIÁ TRỊ MẶC ĐỊNH khi Customizer chưa từng được chỉnh.
 *
 * Ngân sách hiệu năng: bản thân file này phải < 8KB (không tính base.css).
 *
 * @package FProject
 * @since   1.0.0
 */

:root{
  /* ============ MÀU — khớp fp_get_default_design_tokens()['color'] ============ */
  --fp-color-primary:   #3D8B82;
  --fp-color-secondary: #1C3D3A;
  --fp-color-cta:       #0D9488;
  --fp-color-success:   #22C55E;
  --fp-color-warning:   #F59E0B;
  --fp-color-error:     #EF4444;
  --fp-color-bg:        #F4F9F8;

  /* Dẫn xuất — không phải token gốc, tính từ token trên, không đưa vào Customizer */
  --fp-color-surface:      #FFFFFF;
  --fp-color-border:       #E5ECEA;
  --fp-color-text:         var(--fp-color-secondary);
  --fp-color-text-muted:   #52706B;
  --fp-color-info:         #2563EB;
  --fp-glass-bg:           rgb(255 255 255 / 68%);
  --fp-glass-border:       rgb(255 255 255 / 50%);
  --fp-panel-bg:           rgb(255 255 255 / 97%);
  --fp-overlay:            rgb(15 30 28 / 40%);

  /* ============ BO GÓC — khớp fp_get_default_design_tokens()['radius'] ============ */
  --fp-radius-sm: 8px;
  --fp-radius-md: 12px;
  --fp-radius-lg: 16px;
  --fp-radius-xl: 24px;
  --fp-radius-pill: 999px;

  /* ============ BÓNG — khớp fp_get_default_design_tokens()['shadow'] ============ */
  --fp-shadow-sm: 0 4px 14px rgba(28,61,58,.06);
  --fp-shadow-md: 0 10px 30px rgba(28,61,58,.10);
  --fp-shadow-lg: 0 20px 48px rgba(28,61,58,.16);
  --fp-glow-primary: 0 8px 20px rgba(13,148,136,.22);

  /* ============ ĐỘ MỜ KÍNH — khớp fp_get_default_design_tokens()['blur'] ============ */
  --fp-blur-glass: 22px;
  --fp-glass-sat: 180%;

  /* ============ Z-INDEX — khớp fp_get_default_design_tokens()['zindex'] ============ */
  --fp-zindex-header: 900;
  --fp-zindex-drawer: 895;
  --fp-zindex-scrim:  890;
  --fp-zindex-dock:   950;
  --fp-zindex-toast:  1000;

  /* ============ TYPOGRAPHY — thang Apple/Inter, fluid bằng clamp() ============ */
  --fp-font-heading: 'Inter', -apple-system, system-ui, sans-serif;
  --fp-font-body:    'Be Vietnam Pro', 'Inter', system-ui, sans-serif;
  --fp-fs-hero: clamp(2rem, 4.5vw, 3.75rem);
  --fp-fs-h1:   clamp(1.625rem, 3vw, 2.25rem);
  --fp-fs-h2:   clamp(1.375rem, 2.4vw, 1.75rem);
  --fp-fs-h3:   1.0625rem;
  --fp-fs-sub:  clamp(1rem, 1.5vw, 1.25rem);
  --fp-fs-body: 1rem;
  --fp-fs-sm:   0.8125rem;
  --fp-fs-xs:   0.6875rem;

  /* ============ KHOẢNG CÁCH — fluid, không px cố định cho khối chính ============ */
  --fp-space-section: clamp(48px, 8vw, 120px);
  --fp-space-gap:     clamp(16px, 2.5vw, 24px);
  --fp-container-w:   1200px;
  --fp-header-h:      68px;

  /* ============ CHUYỂN ĐỘNG — GPU-accelerated ============ */
  --fp-ease:   cubic-bezier(.22,.61,.36,1);
  --fp-spring: cubic-bezier(.34,1.56,.64,1);
  --fp-dur-1: 150ms;
  --fp-dur-2: 250ms;
  --fp-dur-3: 350ms;
}

/**
 * ============ BREAKPOINT — tài liệu tham chiếu, dùng min-width mobile-first ============
 * Mobile nhỏ:  360px  — @media (min-width:360px)
 * Mobile lớn:  390px  — @media (min-width:390px)
 * Tablet dọc:  768px  — @media (min-width:768px)
 * Tablet ngang:1024px — @media (min-width:1024px)
 * Laptop:      1280px — @media (min-width:1280px)
 * Desktop:     1440px — @media (min-width:1440px)
 * Không dùng breakpoint cố định cho layout chính — ưu tiên clamp()/minmax()
 * để container tự thích ứng; breakpoint chỉ dùng khi đổi CẤU TRÚC (vd nav
 * desktop → drawer mobile), không dùng để chỉnh kích thước đơn thuần.
 */

@media (prefers-reduced-motion: reduce) {
  *{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}