/* ════════════════════════════════════════════════════════════
   THIÊN CỔ KỲ THƯ · DESIGN TOKENS v1.0
   Nguồn: thien-co-ky-thu-design-system.html — không sửa giá trị.
   Phần "bổ sung cho mobile" nằm ở cuối, tách riêng.
   ════════════════════════════════════════════════════════════ */
:root{
  /* ── Màu nền tảng ─────────────────────────── */
  --paper:       #EEEAD9;
  --paper-sunk:  #E5E0C9;
  --paper-raise: #F6F3E8;
  --blue:        #1A3256;
  --blue-lift:   #2E5486;
  --blue-ink:    #132540;
  --gold:        #D1AA70;
  --gold-tx:     #96733A;
  --cinnabar:    #B8432B;

  /* ── Màu ngữ nghĩa ────────────────────────── */
  --tx:      #1A3256;
  --tx-mut:  rgba(26,50,86,.62);
  --tx-faint:rgba(26,50,86,.40);
  --hair:    rgba(26,50,86,.16);
  --hair-soft: rgba(26,50,86,.08);
  --on-dark:     #EEEAD9;
  --on-dark-mut: rgba(238,234,217,.60);
  --hair-dark:   rgba(238,234,217,.16);

  /* ── Ngũ hành ─────────────────────────────── */
  --e-moc:  #5E7F58;
  --e-hoa:  #B8432B;
  --e-tho:  #96733A;
  --e-kim:  #6B6B63;
  --e-thuy: #3E6C93;

  /* ── Chữ ──────────────────────────────────── */
  --cjk:'Songti SC','SimSun','Noto Serif CJK SC','Noto Serif SC',serif;
  --display:'Literata', var(--cjk), Georgia, serif;
  --body:'Be Vietnam Pro', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --dw:600;
  --dw-soft:600;
  --dtrack:-.02em;

  /* ── Bo góc ───────────────────────────────── */
  --r-xs:2px; --r-sm:3px; --r-md:4px; --r-pill:999px;

  /* ── Đổ bóng ──────────────────────────────── */
  --sh-card: 0 18px 44px -30px rgba(19,37,64,.42);
  --sh-deep: 0 24px 50px -30px rgba(19,37,64,.55);

  /* ── Nhịp khoảng cách ─────────────────────── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  /* ── Ký hiệu quẻ ──────────────────────────── */
  --gua-h:8px; --gua-gap:7px; --gua-w:74px;

  /* ══ BỔ SUNG CHO MOBILE-FIRST ══════════════ */
  --read:  620px;   /* bề rộng cột đọc */
  --wide:  1080px;  /* bề rộng landing */
  --pad:   20px;    /* lề ngang mặc định */
  --bar-h: 76px;    /* chiều cao thanh mở khoá sticky */
  --ease:  cubic-bezier(.22,.61,.36,1);
}

@media (min-width:720px){
  :root{ --pad:32px; }
}