/* GENERATED by pd proto sync from design-system/tokens.css — do not edit */
/*
 * Design tokens — hướng C "Gọn như hệ thống" (vòng 1, chọn 2026-10-22).
 *
 * Mọi mockup và mọi component chỉ đọc màu, giãn cách, bo góc, đổ bóng và cỡ chữ qua các
 * custom property ở đây. Sửa GIÁ TRỊ ở file này; không bao giờ viết màu hay kích thước
 * cứng ở nơi khác.
 *
 * QUY TẮC CẤU TRÚC — giữ nguyên khi thay màu, vì mỗi quy tắc sinh ra từ một lỗi thật
 * đã từng làm hỏng cả một bộ mockup:
 *
 * 1. FONT: hệ thống (SF Pro trên iOS, Roboto trên Android) làm chính vì hướng C chọn giọng của chính
 *    nền tảng. Webfont chỉ là dự phòng (Noto Sans, Noto Sans Arabic) và được nạp bằng @import ngay
 *    bên dưới, không ở file nào khác.
 */

/* Nạp Noto Sans Arabic cho AR (Google trả về từng tập con chữ; trình duyệt chỉ tải tập Arabic khi trang có chữ Arabic).
   Tiếng Việt: SF Pro, Roboto và Noto Sans đều phủ đủ dấu; Noto Sans đứng làm chốt cho máy không có font hệ thống. */

:root {
  /* Colour — nền/mặt. Nền xám + mặt trắng: nhóm danh sách nổi lên khỏi nền mà không cần bóng. */
  --color-bg: #f2f2f7;
  --color-surface: #ffffff;
  --color-surface-sunken: #e9e9ef;

  /* Colour — màu của app ("app đang nói"): xanh mòng két. */
  --color-primary: #0b6e7f;
  --color-on-primary: #ffffff;
  --color-primary-soft: #dff1f3;

  /* Colour — màu nhấn cam: cảnh báo nhẹ (sắp chạm trần AI, trang không hỗ trợ). Xem quy tắc 3. */
  --color-accent: #ff9f0a;
  --color-on-accent: #1c1c1e;
  --color-accent-ink: #9a5a00;
  --color-accent-soft: #fff1dc;

  /* Colour — chữ và đường */
  --color-text: #1c1c1e;
  --color-text-muted: #636366;
  --color-border: #d1d1d6;
  /* Viền của Ô NHẬP và điều khiển biểu mẫu: ~3,3:1 trên mặt trắng. Đừng làm nhạt lại. */
  --color-border-strong: #8e8e93;

  /* Colour — trạng thái */
  --color-danger: #c4281c;
  --color-success: #1d7a3e;

  /* Lớp hình ảnh — mảng màu bìa truyện tự sinh và minh hoạ. */
  --color-illu-1: #cfe3f7;
  --color-illu-2: #fbe2b8;
  --color-illu-3: #f3d0dc;
  --color-illu-4: #d3ecd9;
  --color-illu-line: #3a3a3c;
  --gradient-hero: linear-gradient(160deg, var(--color-primary-soft) 0%, var(--color-surface) 62%);
  --gradient-accent: linear-gradient(160deg, var(--color-accent-soft) 0%, var(--color-surface) 70%);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);

  /* Typography */
  --font-family-base: -apple-system, "SF Pro Text", system-ui, Roboto, "Segoe UI", Helvetica, Arial, "Noto Sans", "Noto Sans Arabic", sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  /* Tiêu đề lớn kiểu iOS (34px) ở đầu mỗi tab. */
  --font-size-xl: 2.125rem;
  /* Bậc lớn nhất, dành riêng cho CON SỐ chủ đạo: số chương AI đã dùng trên đồng hồ hạn mức. */
  --font-size-2xl: 2.5rem;
  --chart-label-size: 9;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Đường viền, vùng chạm, biểu tượng */
  --border-hairline: 1px;
  --border-focus: 2px;
  --border-thick: 3px;
  --tap-target: 2.75rem;
  --icon-size-sm: 1rem;
  --icon-size-md: 1.25rem;
  --icon-size-lg: 1.5rem;
  --icon-size-xl: 2rem;
  --icon-stroke: 2;


  /* Màn lớn (bổ sung 2026-10-22, Gate 1 vòng 2). Điểm gãy (breakpoint) KHÔNG dùng được var() trong @media,
     nên 600px và 840px được viết thẳng trong @media của từng component; hai token dưới chỉ để tra cứu và cho JS.
     compact < 600 · medium 600–839 · expanded ≥ 840. Xem design-system.md §9. */
  --bp-medium: 600px;
  --bp-expanded: 840px;
  --layout-content-max: 40rem;      /* cột đơn giữa màn (SCR-001/002/009/010) */
  --layout-webtoon-max: 45rem;      /* dải webtoon ở trình đọc */
  --layout-sheet-max: 40rem;        /* sheet dưới ở ≥600 */
  --layout-side-sheet-width: 25rem; /* sheet bên ở ≥840 */
  --layout-rail-width: 5rem;        /* thanh điều hướng bên */
  --layout-list-pane: 24rem;        /* khung danh sách của danh sách–chi tiết ở ≥840 */
  --layout-page-max: 30rem;         /* một trang truyện trong trình đọc hai trang */
  --layout-grid-min: 9rem;          /* cột nhỏ nhất của lưới bìa (3–4 cột ở medium) */
  --layout-gutter: var(--space-6);  /* lề ngang ở ≥600 (compact vẫn dùng --space-4) */

  /* Kích thước bìa truyện (tỉ lệ 3:4) */
  --cover-sm: 2.25rem;
  --cover-md: 4rem;
  --cover-lg: 7.5rem;

  /* Radii — 4 bậc: ô nhỏ trong nhóm, nhóm danh sách/nút, sheet, viên thuốc. */
  --radius-sm: 0.25rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-pill: 999px;

  /* Elevation — hướng C hầu như không dùng bóng; chỉ sheet và nút nổi. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.14);
}

/* ============================================================
   CHẾ ĐỘ TỐI — chỉ khi bị ép bằng data-theme="dark" (xem quy tắc 2 ở đầu file).
   PRD chưa đưa chế độ tối vào phạm vi 1.0.
   ============================================================ */
:root[data-theme="dark"] {
  --color-bg: #000000;
  --color-surface: #1c1c1e;
  --color-surface-sunken: #2c2c2e;
  --color-primary: #4fc3d4;
  --color-on-primary: #00262c;
  --color-primary-soft: #0e3439;
  --color-accent: #ffb340;
  --color-on-accent: #1c1c1e;
  --color-accent-ink: #ffb340;
  --color-accent-soft: #3a2a10;
  --color-text: #f2f2f7;
  --color-text-muted: #98989f;
  --color-border: #38383a;
  --color-border-strong: #636366;
  --color-danger: #ff6961;
  --color-success: #30d158;
  --color-illu-1: #1d3550;
  --color-illu-2: #4a3510;
  --color-illu-3: #4a2335;
  --color-illu-4: #1d3a2c;
  --color-illu-line: #e5e5ea;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.6);
}