/*
 * MLN131 — design tokens dùng chung cho cả 3 trang.
 * Thứ tự link trong <head>: Google Fonts → tokens.css → base.css → <trang>.css
 * Định hướng "Giấy thi": nền giấy, mực chàm, bút đỏ chấm điểm, ô li vở học trò.
 * Chi tiết cách dùng: docs/design-brief.md
 */

:root {
  color-scheme: light;

  /* ---------- Bảng màu gốc (không dùng trực tiếp trong trang, dùng biến ngữ nghĩa bên dưới) ---------- */
  --c-paper: #FAF8F2;        /* giấy thi */
  --c-paper-shade: #EFEBE1;  /* giấy đã ngả, ô che gợi ý */
  --c-white: #FFFFFF;
  --c-ink: #1C2150;          /* mực chàm — chữ chính, 14.3:1 trên giấy */
  --c-ink-soft: #4B5070;     /* mực nhạt — chữ phụ, 7.4:1 trên giấy */
  --c-red-pen: #B3122A;      /* bút đỏ chấm điểm — 6.5:1 trên giấy, 6.9:1 với chữ trắng */
  --c-rule-minor: #DCD9EE;   /* dòng kẻ ô li mảnh */
  --c-rule-major: #B9B3E0;   /* dòng kẻ ô li đậm */
  --c-rule-margin: #E26A79;  /* lề đỏ của vở */

  /* ---------- Màu ngữ nghĩa ---------- */
  --bg: var(--c-paper);            /* nền trang */
  --surface: var(--c-white);       /* thẻ, ô gợi ý đã mở, nút ghost */
  --surface-2: var(--c-paper-shade); /* ô gợi ý chưa mở, khối phụ */
  --ink: var(--c-ink);             /* chữ chính */
  --ink-muted: var(--c-ink-soft);  /* chữ phụ, nhãn, nguồn */
  --line: #D6CFBF;                 /* đường kẻ mảnh (chỉ dùng trên màn gần: host) */
  --line-strong: var(--c-ink);     /* viền rõ khi chiếu (≥ 2px) */
  --accent: var(--c-red-pen);      /* điểm số, "+X", huy hiệu điểm, gợi ý đang chờ */
  --accent-ink: var(--c-white);    /* chữ đặt trên nền --accent */
  --accent-soft: #F7E1E4;          /* nền nhạt màu đỏ (ô vừa cộng điểm trên host) */
  --good: #1A6F3F;                 /* đã kết nối, đã cộng */
  --good-soft: #DDEFE3;
  --warn: #9A4D00;                 /* đang kết nối lại */
  --warn-soft: #F8E7D2;
  --danger: var(--c-red-pen);      /* Reset — luôn kiểu viền, không tô kín */
  --focus: var(--c-ink);           /* vòng focus bàn phím */
  --scrim: rgba(28, 33, 80, 0.55); /* phủ mờ sau overlay */

  /* ô li (texture vở) */
  --rule-minor: var(--c-rule-minor);
  --rule-major: var(--c-rule-major);
  --rule-margin: var(--c-rule-margin);

  /* ---------- 6 màu nhóm ----------
   * Chọn bằng phép đo ΔE2000 (bình thường, giả lập máy chiếu nhạt, mù màu đỏ–lục).
   * Nhóm luôn đi kèm tên + số, màu chỉ là tín hiệu phụ. Không xếp 6 màu thành dải sọc liền nhau
   * (tránh giống cờ của một tôn giáo). --team-nX-ink = màu chữ đặt trên nền màu nhóm (≥ 4.5:1). */
  --team-n1: #2F52AE;  --team-n1-ink: #FFFFFF;  /* xanh coban */
  --team-n2: #40B8C6;  --team-n2-ink: #1C2150;  /* xanh ngọc */
  --team-n3: #E79F22;  --team-n3-ink: #1C2150;  /* vàng hổ phách */
  --team-n5: #A3246E;  --team-n5-ink: #FFFFFF;  /* đỏ mận */
  --team-n6: #6F9B47;  --team-n6-ink: #1C2150;  /* xanh lá mạ */
  --team-n7: #C28EF8;  --team-n7-ink: #1C2150;  /* tím oải hương */

  /* ---------- Chữ ---------- */
  --font-display: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui: var(--font-display);
  --font-body: "Vollkorn", "Noto Serif", "Times New Roman", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Thang chữ màn gần (host, slides, form) — px, tỉ lệ 1.25 */
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 25px;
  --fs-2xl: 31px;
  --fs-3xl: 39px;
  --lh-tight: 1.12;
  --lh-ui: 1.35;
  --lh-read: 1.5;  /* serif đọc: rộng hơn sans */

  /* Thang chữ màn chiếu /game.
   * --stage-u = 1/100 chiều ngang của khung 16:9 vừa màn hình: 19.2px @1920×1080, 13.65px @1366×768.
   * Màn 4:3 (1024×768) dùng bố cục xếp hạng nằm dưới → cho phép u lớn hơn (13.3px). */
  --stage-u: min(1vw, 1.7778vh);
  --g-fs-small:  clamp(16px, calc(var(--stage-u) * 1.17), 32px);  /* nguồn, chú thích   ~22px @1920 */
  --g-fs-label:  clamp(16px, calc(var(--stage-u) * 1.46), 40px);  /* "Gợi ý 1", nhãn    ~28px */
  --g-fs-team:   clamp(17px, calc(var(--stage-u) * 1.83), 48px);  /* tên nhóm          ~35px */
  --g-fs-hint:   clamp(18px, calc(var(--stage-u) * 2.75), 72px);  /* chữ gợi ý (serif) ~53px */
  --g-fs-score:  clamp(18px, calc(var(--stage-u) * 2.29), 60px);  /* điểm trong bảng   ~44px */
  --g-fs-h2:     clamp(22px, calc(var(--stage-u) * 2.86), 76px);  /* "Vòng 3/8", tiêu đề ~55px */
  --g-fs-h1:     clamp(26px, calc(var(--stage-u) * 3.58), 96px);  /* tiêu đề phụ lớn    ~69px */
  --g-fs-points: clamp(32px, calc(var(--stage-u) * 4.47), 120px); /* số điểm trong ô Điểm ~86px */
  --g-fs-answer: clamp(34px, calc(var(--stage-u) * 5.59), 150px); /* tên tôn giáo khi công bố ~107px */
  --g-fs-title:  clamp(40px, calc(var(--stage-u) * 6.98), 186px); /* "Đoán tôn giáo" ở intro ~134px */
  --g-pad:  calc(var(--stage-u) * 2.5);  /* lề màn chiếu */
  --g-gap:  calc(var(--stage-u) * 1.25); /* khoảng cách giữa khối */
  --g-rule: max(2px, calc(var(--stage-u) * 0.16)); /* viền khi chiếu ~3px */

  /* ---------- Khoảng cách (bội số 4px) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --tap: 48px;         /* chiều cao tối thiểu vùng chạm */
  --tap-lg: 56px;      /* nút chính trên host */

  /* ---------- Bo góc: giấy gần như vuông, nút mềm hơn, chip tròn ---------- */
  --radius-sm: 3px;    /* thẻ giấy, ô gợi ý, bảng */
  --radius: 8px;       /* nút, ô nhập */
  --radius-lg: 14px;   /* khay dưới cùng trên host, overlay */
  --radius-pill: 999px;

  /* ---------- Bóng: nhuốm màu mực, không xám trung tính ---------- */
  --shadow: 0 1px 0 rgba(28, 33, 80, 0.06), 0 8px 24px -12px rgba(28, 33, 80, 0.35);
  --shadow-lift: 0 2px 0 rgba(28, 33, 80, 0.08), 0 18px 40px -16px rgba(28, 33, 80, 0.45);

  /* ---------- Chuyển động ---------- */
  --dur-fast: 160ms;   /* phản hồi chạm, đổi màu nút */
  --dur: 320ms;        /* overlay, đổi số điểm */
  --dur-slow: 640ms;   /* mở gợi ý, công bố đáp án, cột bục vinh danh */
  --dur-move: 520ms;   /* FLIP sắp xếp lại bảng xếp hạng */
  --dur-flash: 1600ms; /* nháy "+X" khi cộng điểm */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);        /* ra nhanh, dừng êm — mặc định */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* FLIP */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* bật nhẹ cho dấu "+X" */

  /* ---------- Lớp chồng ---------- */
  --z-dock: 20;
  --z-overlay: 50;
  --z-toast: 80;
  --z-conn: 90;
}

/* Màn 4:3 / 5:4 nằm ngang: bảng xếp hạng chuyển xuống dưới, chữ được phép to hơn theo chiều ngang. */
@media (orientation: landscape) and (max-aspect-ratio: 3/2) {
  :root { --stage-u: min(1.3vw, 1.7778vh); }
}

/* Giảm chuyển động: mọi thời lượng về 0, JS đọc biến này cũng nhận 0. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
    --dur-move: 0ms;
    --dur-flash: 0ms;
  }
}

/* Chủ đề tối — trang chiếu slide `/` (đặt data-theme="dark" trên <html>).
 * Nền đen tuyệt đối để khoảng viền quanh slide biến mất trên máy chiếu. */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #15182B;
  --surface-2: #23273F;
  --ink: #F3F1EA;
  --ink-muted: #A7ACC2;
  --line: #343A5C;
  --line-strong: #F3F1EA;
  --accent: #FF6B7D;
  --accent-ink: #1C2150;
  --accent-soft: #3A1C2A;
  --good: #5CC98F;
  --good-soft: #17352A;
  --warn: #F2A64A;
  --warn-soft: #3A2A14;
  --danger: #FF6B7D;
  --focus: #F3F1EA;
  --scrim: rgba(0, 0, 0, 0.7);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.9);
  --shadow-lift: 0 18px 48px -16px rgba(0, 0, 0, 0.95);
}