/* ==========================================================================
   FTEL Minigame Design System — Tokens (CSS custom properties)
   Nguồn: resources/FTEL_Brand_Guildlines.pdf (FCM 2025)
   Dùng chung cho: website, app (webview), Zalo Mini App, kiosk activation.

   Cấu trúc 3 lớp:
     1. Primitive  --ftel-*      giá trị gốc từ brand (không dùng trực tiếp trong UI)
     2. Semantic   --ds-*        vai trò (text, surface, action...) — UI dùng lớp này
     3. Mode       [data-platform] / [data-theme] ghi đè lớp semantic

   Bật mode:  <html data-platform="web|app|zalo|kiosk" data-theme="orange|blue|green">
   ========================================================================== */

/* ---------- Font chính thức (đặt file vào design/assets/fonts/) ---------- */
@font-face { font-family: "FPT SongVui"; src: url("../assets/fonts/FPTSongVui-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "FPT SongVui"; src: url("../assets/fonts/FPTSongVui-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Articulat CF"; src: url("../assets/fonts/ArticulatCF-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Articulat CF"; src: url("../assets/fonts/ArticulatCF-DemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Articulat CF"; src: url("../assets/fonts/ArticulatCF-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* ======================= 1. PRIMITIVE ======================= */

  /* Cam — màu chủ đạo (trang 30–32) */
  --ftel-orange-red: #FF6A13;   /* Orange-Red, đáy gradient */
  --ftel-orange:     #FF8206;   /* Orange Tange — Pantone 151 C — MÀU CHÍNH */
  --ftel-orange-2:   #FF7C06;
  --ftel-orange-top: #FF971A;   /* đỉnh gradient (đo từ trang 30) */
  /* Xanh dương */
  --ftel-blue:       #0047BB;   /* Blue Crayola — Pantone 2728 C, dùng cho đổ bóng */
  --ftel-blue-2:     #3755DF;
  --ftel-cyan:       #6BDBFF;
  /* Xanh lá */
  --ftel-green:      #29B80A;   /* North Green */
  --ftel-green-2:    #00CF50;
  --ftel-lime:       #BCEA3E;
  /* Màu bổ trợ */
  --ftel-pink:       #FF9BD3;   /* Lavender Pink */
  --ftel-pink-2:     #F9ABD2;
  --ftel-pink-3:     #F9C7D3;
  --ftel-lotion:     #F5F5F5;   /* Lotion */
  --ftel-black:      #1E1E1E;   /* Smoky Black */
  --ftel-white:      #FFFFFF;

  /* Tông dẫn xuất (KHÔNG có trong brand book) — chỉ để đạt tương phản chữ */
  --ftel-orange-ink: #C2410C;   /* chữ cam trên nền trắng: 5.2:1 */
  --ftel-green-ink:  #168A00;   /* chữ xanh lá trên nền trắng: 4.5:1 */
  --ftel-orange-50:  #FFF4E8;
  --ftel-orange-100: #FFE4C7;
  --ftel-blue-50:    #EEF2FD;
  --ftel-green-50:   #EEFAE9;
  --ftel-gray-300:   #E3E3E3;
  --ftel-gray-500:   #8A8A8A;
  --ftel-gray-700:   #545454;
  /* Màu chức năng (ngoài brand) — chỉ dùng cho lỗi/cảnh báo hệ thống */
  --ftel-red:        #D92D20;
  --ftel-amber:      #F5A300;

  /* Gradient chính thức: cam sáng → Orange-Red (điểm giữa 59%) */
  --ftel-gradient-orange: linear-gradient(180deg, #FF971A 0%, #FF7C06 59%, #FF6A13 100%);
  --ftel-gradient-blue:   linear-gradient(180deg, #3755DF 0%, #0047BB 100%);
  --ftel-gradient-green:  linear-gradient(180deg, #00CF50 0%, #29B80A 100%);

  /* Font */
  --ftel-font-display: "FPT SongVui", "Lexend", "Be Vietnam Pro", system-ui, sans-serif;
  --ftel-font-body:    "Articulat CF", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ftel-font-number:  "FPT SongVui", "Lexend", system-ui, sans-serif;

  /* Hình khối bit-dot: nghiêng 13° (đồng nhất góc logo FPT) */
  --ftel-skew: -13deg;
  --ftel-skew-inverse: 13deg;

  /* ======================= 2. SEMANTIC ======================= */

  /* Theme mặc định = cam. Đổi bằng [data-theme] */
  --ds-brand:            var(--ftel-orange);
  --ds-brand-strong:     var(--ftel-orange-red);
  --ds-brand-ink:        var(--ftel-orange-ink);
  --ds-brand-soft:       var(--ftel-orange-50);
  --ds-brand-soft-2:     var(--ftel-orange-100);
  --ds-brand-gradient:   var(--ftel-gradient-orange);
  --ds-accent:           var(--ftel-pink);       /* cặp "trí tuệ": cam + hồng (trang 29) */
  --ds-on-brand:         var(--ftel-white);

  /* Text */
  --ds-text:             var(--ftel-black);
  --ds-text-secondary:   var(--ftel-gray-700);
  --ds-text-tertiary:    var(--ftel-gray-500);
  --ds-text-inverse:     var(--ftel-white);
  --ds-text-link:        var(--ds-brand-ink);

  /* Surface */
  --ds-surface:          var(--ftel-white);
  --ds-surface-subtle:   var(--ftel-lotion);
  --ds-surface-brand:    var(--ds-brand);
  --ds-surface-inverse:  var(--ftel-black);
  --ds-overlay:          rgba(30, 30, 30, .56);
  --ds-border:           var(--ftel-gray-300);
  --ds-border-strong:    var(--ftel-gray-500);
  --ds-focus-ring:       var(--ftel-blue-2);

  /* Action */
  --ds-action-primary-bg:      var(--ds-brand-gradient);
  --ds-action-primary-bg-flat: var(--ds-brand-strong);
  --ds-action-primary-fg:      var(--ftel-white);
  --ds-action-secondary-bg:    var(--ftel-blue);        /* trắng trên #0047BB = 8.0:1 */
  --ds-action-secondary-fg:    var(--ftel-white);
  --ds-action-disabled-bg:     var(--ftel-gray-300);
  --ds-action-disabled-fg:     var(--ftel-gray-500);

  /* Trạng thái */
  --ds-success:      var(--ftel-green);
  --ds-success-ink:  var(--ftel-green-ink);
  --ds-success-soft: var(--ftel-green-50);
  --ds-info:         var(--ftel-blue);
  --ds-info-soft:    var(--ftel-blue-50);
  --ds-warning:      var(--ftel-amber);
  --ds-danger:       var(--ftel-red);
  --ds-danger-soft:  #FDECEA;

  /* Game — confetti & phần thưởng lấy đúng 6 màu brand */
  --ds-confetti-1: var(--ftel-orange);
  --ds-confetti-2: var(--ftel-blue-2);
  --ds-confetti-3: var(--ftel-green-2);
  --ds-confetti-4: var(--ftel-lime);
  --ds-confetti-5: var(--ftel-pink);
  --ds-confetti-6: var(--ftel-cyan);
  --ds-prize-win:  var(--ftel-lime);
  --ds-prize-lose: var(--ftel-lotion);

  /* Spacing — lưới 4px */
  --ds-space-0: 0;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;
  --ds-space-20: 80px;

  /* Radius */
  --ds-radius-xs: 4px;
  --ds-radius-sm: 8px;
  /* md · lg · xl khai báo theo platform bên dưới */
  --ds-radius-2xl: 32px;
  --ds-radius-pill: 999px;

  /* Shadow — brand quy định dùng xanh Blue Crayola cho đổ bóng */
  --ds-shadow-sm:  0 1px 2px rgba(0, 47, 124, .08), 0 1px 1px rgba(0, 47, 124, .04);
  --ds-shadow-md:  0 4px 12px rgba(0, 47, 124, .10), 0 2px 4px rgba(0, 47, 124, .06);
  --ds-shadow-lg:  0 16px 40px rgba(0, 47, 124, .16), 0 4px 12px rgba(0, 47, 124, .08);
  --ds-shadow-cta: 0 8px 20px rgba(255, 106, 19, .35);

  /* Motion */
  --ds-dur-fast: 120ms;
  --ds-dur-base: 200ms;
  --ds-dur-slow: 320ms;
  --ds-dur-reward: 640ms;
  --ds-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ds-ease-out: cubic-bezier(0, 0, .2, 1);
  --ds-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);

  /* Z-index */
  --ds-z-hud: 10;
  --ds-z-sticky: 20;
  --ds-z-sheet: 40;
  --ds-z-modal: 50;
  --ds-z-toast: 60;
  --ds-z-confetti: 70;

  /* Font theo vai trò. Cỡ chữ khai báo theo platform bên dưới */
  --ds-font-display: var(--ftel-font-display);
  --ds-font-body:    var(--ftel-font-body);
  --ds-font-number:  var(--ftel-font-number);

  --ds-container: 1200px;
}

/* Cỡ chữ, vùng chạm, safe area — khai báo lại trên mọi [data-platform]
   để mode lồng nhau (vd. khung Zalo trong trang web) không thừa hưởng mode cha. */
:root, [data-platform] {
  /* Typography (web/app/zalo). Headline: SongVui, Sentence case, leading F×1
     (nâng 1.1 cho dấu tiếng Việt) · Sub 1: Title Case ×1.4 · Sub 2: UPPER ×1.3 · Body ×1.5 */
  --ds-fs-display: 40px;  --ds-lh-display: 1.1;
  --ds-fs-h1:      32px;  --ds-lh-h1: 1.1;
  --ds-fs-h2:      24px;  --ds-lh-h2: 1.15;
  --ds-fs-h3:      20px;  --ds-lh-h3: 1.2;
  --ds-fs-sub1:    18px;  --ds-lh-sub1: 1.4;
  --ds-fs-sub2:    13px;  --ds-lh-sub2: 1.3;
  --ds-fs-body:    16px;  --ds-lh-body: 1.5;
  --ds-fs-body-sm: 14px;  --ds-lh-body-sm: 1.5;
  --ds-fs-caption: 12px;  --ds-lh-caption: 1.4;
  --ds-fs-button:  17px;
  --ds-fs-score:   48px;
  --ds-tracking-heading: -0.025em;  /* "-25" cho tiêu đề nhỏ */
  --ds-tracking-body: 0;
  --ds-tracking-long: -0.01em;

  /* Kích thước tương tác */
  --ds-touch-min: 44px;
  --ds-control-h-sm: 36px;
  --ds-control-h-md: 48px;
  --ds-control-h-lg: 56px;
  --ds-gutter: 16px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-xl: 24px;

  /* Safe area (Zalo/app ghi đè) */
  --ds-safe-top: env(safe-area-inset-top, 0px);
  --ds-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ds-header-h: 56px;
}

/* ======================= 3. MODE: NỀN TẢNG ======================= */

/* Web: desktop rộng hơn → tăng display */
@media (min-width: 1024px) {
  [data-platform="web"] {
    --ds-fs-display: 64px;
    --ds-fs-h1: 44px;
    --ds-fs-h2: 32px;
    --ds-gutter: 32px;
    --ds-header-h: 72px;
  }
}

/* App (webview trong app FPT): header do app native quản lý */
[data-platform="app"] {
  --ds-header-h: 0px;
  --ds-touch-min: 48px;
}

/* Zalo Mini App: header Zalo cố định phía trên, có nút "..." và "x" bên phải */
[data-platform="zalo"] {
  --ds-touch-min: 48px;
  --ds-safe-top: var(--zaui-safe-area-inset-top, env(safe-area-inset-top, 0px));
  --ds-safe-bottom: var(--zaui-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --ds-header-h: 44px;
}

/* Kiosk activation offline: màn cảm ứng đứng 1080×1920, xem từ 1–2m, ngón tay to, đông người */
[data-platform="kiosk"] {
  --ds-fs-display: 112px;
  --ds-fs-h1: 80px;
  --ds-fs-h2: 56px;
  --ds-fs-h3: 40px;
  --ds-fs-sub1: 32px;
  --ds-fs-sub2: 22px;
  --ds-fs-body: 26px;
  --ds-fs-body-sm: 22px;
  --ds-fs-caption: 18px;
  --ds-fs-button: 34px;
  --ds-fs-score: 140px;
  --ds-touch-min: 96px;
  --ds-control-h-sm: 72px;
  --ds-control-h-md: 96px;
  --ds-control-h-lg: 120px;
  --ds-gutter: 64px;
  --ds-radius-md: 20px;
  --ds-radius-lg: 28px;
  --ds-radius-xl: 40px;
  --ds-header-h: 120px;
}

/* TV / LED tại sự kiện: màn ngang 1920×1080, KHÔNG cảm ứng, xem từ 3–5m.
   Chỉ hiển thị (sân chơi, bảng điểm, QR tham gia); thao tác nằm trên điện thoại/nút booth. */
[data-platform="tv"] {
  --ds-fs-display: 120px;
  --ds-fs-h1: 88px;
  --ds-fs-h2: 64px;
  --ds-fs-h3: 44px;
  --ds-fs-sub1: 36px;
  --ds-fs-sub2: 26px;
  --ds-fs-body: 30px;
  --ds-fs-body-sm: 26px;
  --ds-fs-caption: 22px;
  --ds-fs-button: 36px;
  --ds-fs-score: 180px;
  --ds-touch-min: 0px;
  --ds-control-h-sm: 64px;
  --ds-control-h-md: 88px;
  --ds-control-h-lg: 112px;
  --ds-gutter: 72px;
  --ds-radius-md: 20px;
  --ds-radius-lg: 32px;
  --ds-radius-xl: 48px;
  --ds-header-h: 120px;
}

/* ======================= 3. MODE: THEME CHIẾN DỊCH =======================
   3 cặp màu từ trang 29: trí tuệ (cam+hồng), công nghệ (xanh+cyan), kết nối (lá+lime) */
[data-theme="blue"] {
  --ds-brand: var(--ftel-blue-2);
  --ds-brand-strong: var(--ftel-blue);
  --ds-brand-ink: var(--ftel-blue);
  --ds-brand-soft: var(--ftel-blue-50);
  --ds-brand-soft-2: #DCE4FB;
  --ds-brand-gradient: var(--ftel-gradient-blue);
  --ds-accent: var(--ftel-cyan);
  --ds-shadow-cta: 0 8px 20px rgba(0, 71, 187, .35);
}
[data-theme="green"] {
  --ds-brand: var(--ftel-green);
  --ds-brand-strong: var(--ftel-green);
  --ds-brand-ink: var(--ftel-green-ink);
  --ds-brand-soft: var(--ftel-green-50);
  --ds-brand-soft-2: #D6F3CC;
  --ds-brand-gradient: var(--ftel-gradient-green);
  --ds-accent: var(--ftel-lime);
  --ds-shadow-cta: 0 8px 20px rgba(41, 184, 10, .35);
}

/* Giảm chuyển động theo cài đặt hệ điều hành */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-dur-fast: 0ms;
    --ds-dur-base: 0ms;
    --ds-dur-slow: 0ms;
    --ds-dur-reward: 0ms;
  }
}