/* =============================================================================
   Soi Cầu Pro V3 — tokens.css
   Design tokens cho giao diện "SWISS TỐI GIẢN" (International Typographic Style).
   Phong cách: nền TRẮNG, chữ ĐEN (Inter/grotesque), lưới RỘNG nhiều khoảng trắng,
   đường KẺ MẢNH (hairline) thay đổ bóng/bo góc, CHỈ 1 nhấn ĐỎ dùng tiết chế
   (số ĐB, active, CTA, chấm LIVE). Phẳng tuyệt đối — không gradient, không shadow,
   góc vuông. Giữ TÊN biến --scp-* — chỉ đổi GIÁ TRỊ, khác hẳn v1 (blue SaaS) & v2 (giấy).
   ========================================================================== */

:root {
  /* ---- Brand — 1 nhấn ĐỎ trên nền trắng-đen ----------------------------- */
  --scp-primary: #E5322D;      /* đỏ nhấn: link/active/CTA/ĐB */
  --scp-primary-ink: #C21F1A;  /* đỏ đậm: hover */
  --scp-primary-600: #E5322D;
  --scp-secondary: #111111;    /* đen: cấu trúc/nút phụ */
  --scp-accent: #111111;       /* điểm xuyết = đen (Swiss: đơn sắc) */
  --scp-accent-ink: #000000;
  --scp-db: #E5322D;           /* số đặc biệt = đỏ nhấn */
  --scp-win: #1A7F37;          /* trạng thái về = lục trầm (dùng ít) */
  --scp-warning: #9A6700;      /* cảnh báo = hổ phách trầm */

  /* "Gradient" → PHẲNG (giữ biến, khỏi vỡ template) */
  --scp-grad: #E5322D;
  --scp-grad-soft: #FBEBEA;    /* đỏ rất nhạt cho khối nhấn */
  --scp-grad-db: #E5322D;

  /* ---- Nền & chữ — trắng/đen sạch --------------------------------------- */
  --scp-bg: #FFFFFF;
  --scp-surface: #FFFFFF;
  --scp-surface-2: #F4F4F5;    /* xám rất nhạt: zebra/hover/ô header */
  --scp-surface-3: #E8E8EA;
  --scp-border: #E4E4E7;       /* hairline nhạt */
  --scp-border-strong: #111111;/* kẻ đen cấu trúc (Swiss rule) */
  --scp-ink: #111111;          /* gần đen */
  --scp-ink-2: #3F3F46;
  --scp-muted: #71717A;        /* xám (AA ≥4.5:1 trên trắng) */

  /* ---- Soft tints ------------------------------------------------------- */
  --scp-primary-soft: #FBEBEA;
  --scp-accent-soft:  var(--scp-surface-2);
  --scp-db-soft:      #FBEBEA;
  --scp-win-soft:     color-mix(in srgb, var(--scp-win) 12%, #fff);

  /* ---- Theo miền — đơn sắc (thang xám; MN nhấn đỏ) ---------------------- */
  --scp-mb: #111111;
  --scp-mb-soft:  var(--scp-surface-2);
  --scp-mt: #52525B;
  --scp-mt-soft:  var(--scp-surface-2);
  --scp-mn: #E5322D;
  --scp-mn-soft:  #FBEBEA;

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

  /* ---- Component hooks -------------------------------------------------- */
  --scp-header-bg: #FFFFFF;
  --scp-header-main-bg: #FFFFFF;
  --scp-header-ink: var(--scp-ink);
  --scp-header-bottom-bg: #FFFFFF;
  --scp-live: #E5322D;
  --scp-section-title-bg: var(--scp-surface-2);
  --scp-nav-ink: var(--scp-ink);
  --scp-nav-active-bg: #FFFFFF;
  --scp-nav-active-ink: var(--scp-primary);
  --scp-footer-bg: #111111;    /* footer đen tuyền */
  --scp-footer-ink: #FFFFFF;
  --scp-footer-muted: #A1A1AA;
  --scp-section-title-ink: var(--scp-ink);
  --scp-card-bg: var(--scp-surface);
  --scp-card-radius: 0px;       /* Swiss: góc VUÔNG tuyệt đối */
  --scp-zebra: #FAFAFA;
  --scp-table-head-bg: #FFFFFF;

  /* ---- Typography — Inter (grotesque) ---------------------------------- */
  --scp-font-heading: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --scp-font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --scp-font-num: "Inter", "Helvetica Neue", Arial, sans-serif; /* tabular figures */

  --scp-fs-xs: 0.75rem;     /* 12 */
  --scp-fs-sm: 0.8125rem;   /* 13 */
  --scp-fs-base: 1rem;      /* 16 */
  --scp-fs-md: 1.0625rem;   /* 17 */
  --scp-fs-lg: 1.25rem;     /* 20 */
  --scp-fs-xl: 1.5rem;      /* 24 */
  --scp-fs-2xl: 2rem;       /* 32 */
  --scp-fs-3xl: 2.5rem;     /* 40 */
  --scp-fs-4xl: 3.25rem;    /* 52 — tít lớn Swiss */

  --scp-lh-body: 1.6;
  --scp-lh-heading: 1.06;   /* leading chặt cho tít lớn */
  --scp-fw-medium: 500;
  --scp-fw-semibold: 600;
  --scp-fw-bold: 700;
  --scp-fw-extra: 800;

  /* ---- Spacing (base 4px, rộng rãi) ------------------------------------- */
  --scp-sp-1: 4px;   --scp-sp-2: 8px;   --scp-sp-3: 12px;  --scp-sp-4: 16px;
  --scp-sp-5: 20px;  --scp-sp-6: 24px;  --scp-sp-8: 32px;  --scp-sp-10: 40px;
  --scp-sp-12: 48px; --scp-sp-16: 64px;

  /* ---- Radius (vuông) --------------------------------------------------- */
  --scp-r-sm: 0px;
  --scp-r: 0px;
  --scp-r-lg: 0px;
  --scp-r-xl: 0px;
  --scp-r-pill: 0px;

  /* ---- Shadow — KHÔNG (Swiss phẳng); giữ biến ------------------------- */
  --scp-shadow-sm: none;
  --scp-shadow: none;
  --scp-shadow-lg: 0 0 0 1px var(--scp-border-strong);
  --scp-shadow-primary: none;

  /* ---- Layout — rộng ---------------------------------------------------- */
  --scp-container: 1200px;
  --scp-gutter: 20px;
  --scp-header-h: 64px;
  --scp-bottomnav-h: 58px;

  /* ---- 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;
}

/* ÉP LIGHT */
:root, :root[data-theme] { color-scheme: light; }

@media (min-width: 768px) {
  :root { --scp-gutter: 40px; }   /* lề rộng kiểu Swiss */
}