/* Ryuga brand tokens (nguồn: design/BRAND.md, bóc từ design/prototype.html đã duyệt).
   Mọi trang web dùng chung file này. Đổi token ở đây, không đổi lẻ từng trang. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');
@font-face{font-family:'Anton';src:url('design/fonts/Anton-Regular.ttf') format('truetype');font-display:swap}

:root{
  /* màu */
  --bg:#ffffff;        /* nền chính */
  --bg2:#f6f7f8;       /* nền khối phụ */
  --card:#f1f3f4;      /* nền chip, thẻ trống */
  --line:#e3e6e8;      /* đường kẻ */
  --ink:#121212;       /* chữ chính */
  --mute:#5f6368;      /* chữ phụ */
  --dim:#9aa0a6;       /* chữ mờ, nhãn */
  --green:#00DC64;     /* nhấn duy nhất: nút chính, "ga" trong logo */
  --green-d:#00B853;   /* nút khi hover/nhấn, chữ xanh trên nền trắng */
  --sys:#0a7cff;       /* phụ: cửa sổ hệ thống, credit */
  /* chữ */
  --head:'Sora',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --logo-title:'Anton','Sora',sans-serif; /* chỉ cho tên truyện trên bìa/hero */
  /* bo góc */
  --r-chip:999px; --r-btn:14px; --r-card:14px; --r-panel:16px; --r-tag:6px;
  /* khoảng cách (lưới 4) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
}

.logo{font:800 22px var(--head);letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.logo b{color:var(--green);font-weight:800}
.chip{display:inline-flex;align-items:center;padding:7px 13px;border-radius:var(--r-chip);background:var(--card);color:var(--mute);font:600 13px var(--body);white-space:nowrap;border:0;cursor:pointer}
.chip.on{background:var(--ink);color:var(--bg)}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:13px 22px;border-radius:var(--r-btn);background:var(--green);color:#fff;font:700 16px var(--head);text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:var(--green-d)}
.btn.ghost{background:var(--card);color:var(--ink)}
.tag{font:700 10px var(--body);letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:var(--r-tag);background:rgba(0,0,0,.55);color:#fff}