/* =============================================================================
   Soi Cầu Pro V4 — tokens.css
   Design tokens cho giao diện "CỔNG SOI CẦU CỔ ĐIỂN" (kiểu soicau247).
   Phong cách: NAV & thanh tiêu đề XANH NAVY chữ trắng, SỐ ĐỎ đậm, header bảng
   CAM, nền xám rất nhạt cho hộp trắng nổi, viền xanh-xám mảnh, badge NEW/HOT đỏ,
   footer navy. Dày đặc, nhiều hộp. Giữ TÊN biến --scp-* — chỉ đổi GIÁ TRỊ.
   ========================================================================== */

:root {
  /* ---- Brand — Navy + Đỏ ------------------------------------------------ */
  --scp-primary: #1E3A8A;      /* navy: nav/tiêu đề/link/nút */
  --scp-primary-ink: #16296B;  /* navy đậm: hover */
  --scp-primary-600: #1E3A8A;
  --scp-secondary: #16296B;
  --scp-accent: #D92027;       /* đỏ: nhấn/số/hot */
  --scp-accent-ink: #B31419;
  --scp-db: #D92027;           /* số ĐB / số dự đoán = đỏ đậm */
  --scp-win: #1B8A3A;          /* lô về = lục */
  --scp-warning: #E68A00;      /* cảnh báo = cam đậm */

  /* "Gradient" → PHẲNG (giữ biến) */
  --scp-grad: #1E3A8A;
  --scp-grad-soft: #E8EEF9;    /* xanh rất nhạt cho khối nhấn */
  --scp-grad-db: #D92027;

  /* ---- Nền & chữ — nền xám, hộp trắng ----------------------------------- */
  --scp-bg: #EEF1F6;           /* nền trang xám xanh nhạt */
  --scp-surface: #FFFFFF;      /* hộp/card trắng */
  --scp-surface-2: #F3F6FB;    /* zebra/hover */
  --scp-surface-3: #E7ECF5;
  --scp-border: #D3DBEA;       /* viền xanh-xám mảnh */
  --scp-border-strong: #B7C3DA;
  --scp-ink: #1F2937;          /* chữ slate đậm */
  --scp-ink-2: #374151;
  --scp-muted: #6B7280;        /* xám */

  /* ---- Soft tints ------------------------------------------------------- */
  --scp-primary-soft: #E8EEF9;
  --scp-accent-soft:  #FCEAEA;
  --scp-db-soft:      #FCEAEA;
  --scp-win-soft:     #E6F4EB;

  /* ---- Theo miền -------------------------------------------------------- */
  --scp-mb: #1E3A8A;           /* MB navy */
  --scp-mb-soft:  #E8EEF9;
  --scp-mt: #0F766E;           /* MT teal */
  --scp-mt-soft:  #E3F2F0;
  --scp-mn: #B45309;           /* MN cam đất */
  --scp-mn-soft:  #FBEEDD;

  /* Ring focus */
  --scp-ring: color-mix(in srgb, var(--scp-primary) 55%, transparent);

  /* ---- Component hooks — thanh tiêu đề navy, header bảng cam ------------ */
  --scp-header-bg: #FFFFFF;
  --scp-header-main-bg: #FFFFFF;
  --scp-header-ink: var(--scp-ink);
  --scp-header-bottom-bg: #1E3A8A;               /* thanh NAV navy */
  --scp-live: #D92027;
  --scp-section-title-bg: #1E3A8A;               /* thanh tiêu đề widget = navy */
  --scp-section-title-ink: #FFFFFF;
  --scp-nav-ink: #FFFFFF;                         /* chữ menu trắng (trên navy) */
  --scp-nav-active-bg: #16296B;
  --scp-nav-active-ink: #FFFFFF;
  --scp-footer-bg: #16296B;                       /* footer navy đậm */
  --scp-footer-ink: #FFFFFF;
  --scp-footer-muted: #AEBBDA;
  --scp-card-bg: var(--scp-surface);
  --scp-card-radius: 3px;
  --scp-zebra: #F5F8FC;
  --scp-table-head-bg: #F6C994;                   /* header bảng CAM */

  /* ---- Typography — Roboto/Arial (cổng cổ điển) ------------------------- */
  --scp-font-heading: "Roboto", Arial, "Tahoma", "Helvetica Neue", sans-serif;
  --scp-font-body: "Roboto", Arial, "Tahoma", "Helvetica Neue", sans-serif;
  --scp-font-num: "Roboto", Arial, "Tahoma", sans-serif;

  --scp-fs-xs: 0.75rem;     /* 12 */
  --scp-fs-sm: 0.8125rem;   /* 13 */
  --scp-fs-base: 0.9375rem; /* 15 — cổng dày, chữ hơi nhỏ */
  --scp-fs-md: 1rem;        /* 16 */
  --scp-fs-lg: 1.1875rem;   /* 19 */
  --scp-fs-xl: 1.375rem;    /* 22 */
  --scp-fs-2xl: 1.625rem;   /* 26 */
  --scp-fs-3xl: 2rem;       /* 32 */
  --scp-fs-4xl: 2.375rem;   /* 38 */

  --scp-lh-body: 1.55;
  --scp-lh-heading: 1.2;
  --scp-fw-medium: 500;
  --scp-fw-semibold: 600;
  --scp-fw-bold: 700;
  --scp-fw-extra: 800;

  /* ---- Spacing (base 4px, dày đặc hơn) ---------------------------------- */
  --scp-sp-1: 4px;   --scp-sp-2: 8px;   --scp-sp-3: 12px;  --scp-sp-4: 16px;
  --scp-sp-5: 18px;  --scp-sp-6: 22px;  --scp-sp-8: 28px;  --scp-sp-10: 36px;
  --scp-sp-12: 44px; --scp-sp-16: 56px;

  /* ---- Radius (nhẹ) ----------------------------------------------------- */
  --scp-r-sm: 2px;
  --scp-r: 3px;
  --scp-r-lg: 4px;
  --scp-r-xl: 6px;
  --scp-r-pill: 3px;

  /* ---- Shadow (nhẹ — hộp nổi trên nền xám) ------------------------------ */
  --scp-shadow-sm: 0 1px 2px rgba(30, 41, 59, .08);
  --scp-shadow: 0 1px 3px rgba(30, 41, 59, .12);
  --scp-shadow-lg: 0 8px 24px rgba(30, 41, 59, .18);
  --scp-shadow-primary: none;

  /* ---- Layout ----------------------------------------------------------- */
  --scp-container: 1200px;
  --scp-gutter: 14px;
  --scp-header-h: 58px;
  --scp-bottomnav-h: 56px;

  /* ---- Motion ----------------------------------------------------------- */
  --scp-ease: cubic-bezier(.4, 0, .2, 1);
  --scp-ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --scp-dur: .15s;
  --scp-dur-slow: .26s;

  /* ---- z-index ---------------------------------------------------------- */
  --scp-z-base: 1;
  --scp-z-sticky: 100;
  --scp-z-dropdown: 200;
  --scp-z-bottomnav: 250;
  --scp-z-overlay: 300;
  --scp-z-drawer: 360;
  --scp-z-modal: 400;
  --scp-z-toast: 500;

  color-scheme: light;
}

:root, :root[data-theme] { color-scheme: light; }

@media (min-width: 768px) {
  :root { --scp-gutter: 16px; }
}