/* =============================================================================
   Soi Cầu Pro V2 — tokens.css
   Design tokens cho giao diện "NIÊN GIÁM BÁO GIẤY" (print almanac).
   Phong cách: nền giấy kem ngả vàng, mực nâu-đen, DẤU ẤN ĐỎ, chữ SERIF
   (Playfair Display + Lora), số kiểu MÁY CHỮ (Roboto Mono) canh cột, đường KẺ
   DÒNG thay cho thẻ bo tròn/đổ bóng. Không gradient, không glow, góc vuông sắc.
   Giữ TÊN biến --scp-* (template/customizer tham chiếu) — chỉ đổi GIÁ TRỊ, hoàn
   toàn khác v1 (blue enterprise) lẫn bản card tím trước đó.
   ========================================================================== */

:root {
  /* ---- Brand — Dấu ấn đỏ + mực (seal red + ink) ------------------------- */
  --scp-primary: #9E2B25;      /* đỏ triện: thương hiệu / link / nhấn */
  --scp-primary-ink: #7C201B;  /* đỏ thẫm: hover/nhấn */
  --scp-primary-600: #9E2B25;
  --scp-secondary: #7C201B;    /* đỏ thẫm phụ */
  --scp-accent: #2C4A63;       /* mực lam trầm: điểm xuyết */
  --scp-accent-ink: #213A4E;
  --scp-db: #B0231B;           /* son đỏ: CHỈ số đặc biệt / nhấn nóng */
  --scp-win: #3F6B34;          /* lục mực: trạng thái / lô về */
  --scp-warning: #94661C;      /* nâu son: cảnh báo */

  /* "Gradient" → PHẲNG như mực in (giữ biến để không vỡ template cũ) */
  --scp-grad: #9E2B25;
  --scp-grad-soft: #F1E7CE;    /* nền giấy nhạt cho khối nhấn */
  --scp-grad-db: #B0231B;

  /* ---- Nền & chữ — giấy báo ngả vàng ------------------------------------ */
  --scp-bg: #EDE3CB;           /* nền bàn/giấy nền đậm hơn để tờ giấy nổi */
  --scp-surface: #FAF5E7;      /* tờ giấy / card */
  --scp-surface-2: #EFE6CD;    /* ô đầu bảng / zebra / hover */
  --scp-surface-3: #E5D9BA;
  --scp-border: #D7C8A2;       /* đường kẻ giấy cũ */
  --scp-border-strong: #B3A074;
  --scp-ink: #241E16;          /* mực nâu-đen */
  --scp-ink-2: #473C2C;
  --scp-muted: #756A52;        /* mực nhạt/mờ (AA ≥4.5:1 trên giấy) */

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

  /* ---- Theo miền (mực trầm, khác nhau nhẹ) ------------------------------ */
  --scp-mb: #2A4160;           /* Miền Bắc: lam mực */
  --scp-mb-soft:  color-mix(in srgb, var(--scp-mb) 12%, var(--scp-surface));
  --scp-mt: #1F5A4E;           /* Miền Trung: lục thông */
  --scp-mt-soft:  color-mix(in srgb, var(--scp-mt) 12%, var(--scp-surface));
  --scp-mn: #8A3A22;           /* Miền Nam: gạch nung */
  --scp-mn-soft:  color-mix(in srgb, var(--scp-mn) 12%, var(--scp-surface));

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

  /* ---- Component hooks (customize theo GROUP trong Customizer) ----------- */
  --scp-header-bg: #FAF5E7;
  --scp-header-main-bg: #FAF5E7;
  --scp-header-ink: var(--scp-ink);
  --scp-header-bottom-bg: #F3EAD2;
  --scp-live: #B0231B;                          /* "trực tiếp" = son đỏ */
  --scp-section-title-bg: var(--scp-surface-2);
  --scp-nav-ink: var(--scp-ink);                /* chữ menu = mực */
  --scp-nav-active-bg: #EFE6CD;                 /* nền menu active (giấy) */
  --scp-nav-active-ink: var(--scp-primary);     /* chữ menu active = đỏ */
  --scp-footer-bg: #26201A;                     /* footer mực đen (colophon) */
  --scp-footer-ink: #F3ECD9;
  --scp-footer-muted: #B7AB90;
  --scp-section-title-ink: var(--scp-ink);
  --scp-card-bg: var(--scp-surface);
  --scp-card-radius: 3px;                        /* gần vuông — góc in sắc */
  --scp-zebra: color-mix(in srgb, var(--scp-surface-2) 60%, var(--scp-surface));
  --scp-table-head-bg: var(--scp-surface-2);

  /* ---- Typography — SERIF niên giám ------------------------------------- */
  --scp-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --scp-font-body: "Lora", Georgia, "Times New Roman", serif;
  --scp-font-num: "Roboto Mono", "Lora", ui-monospace, "Courier New", monospace; /* máy chữ, tabular */

  --scp-fs-xs: 0.75rem;     /* 12 */
  --scp-fs-sm: 0.875rem;    /* 14 */
  --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: 1.875rem;   /* 30 */
  --scp-fs-3xl: 2.25rem;    /* 36 */
  --scp-fs-4xl: 2.75rem;    /* 44 */

  --scp-lh-body: 1.66;
  --scp-lh-heading: 1.16;
  --scp-fw-medium: 500;
  --scp-fw-semibold: 600;
  --scp-fw-bold: 700;
  --scp-fw-extra: 800;      /* Playfair hỗ trợ 800/900; số mono cap 700 */

  /* ---- Spacing (base 4px) ----------------------------------------------- */
  --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 (rất nhỏ — góc in) ---------------------------------------- */
  --scp-r-sm: 2px;
  --scp-r: 3px;
  --scp-r-lg: 3px;
  --scp-r-xl: 4px;
  --scp-r-pill: 3px;        /* KHÔNG bo tròn — "pill" thành nhãn vuông */

  /* ---- Shadow (tối thiểu — giấy phẳng) ---------------------------------- */
  --scp-shadow-sm: 0 1px 2px rgba(40, 30, 15, .06);
  --scp-shadow: 0 2px 5px rgba(40, 30, 15, .09);
  --scp-shadow-lg: 0 10px 30px rgba(40, 30, 15, .18);
  --scp-shadow-primary: 0 2px 0 rgba(124, 32, 27, .16);

  /* ---- Layout ----------------------------------------------------------- */
  --scp-container: 1160px;
  --scp-gutter: 16px;
  --scp-header-h: 60px;
  --scp-bottomnav-h: 58px;

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

  /* ---- 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: kể cả khi OS/thiết bị đang dark, giấy vẫn sáng. */
:root, :root[data-theme] { color-scheme: light; }

/* Desktop gutter rộng hơn */
@media (min-width: 768px) {
  :root { --scp-gutter: 28px; }
}