/* ============================================================================
   Design tokens cho trang tạo bình chọn — Phase 1 của
   MASTER-PLAN-vote-create-redesign.md
   ============================================================================

   Mọi token nằm trong `.vc`, KHÔNG ở `:root`. Đây là ràng buộc §1.5: cùng một
   file style.css phục vụ trang bỏ phiếu, trang kết quả, trang khoá và
   dashboard; đổi token toàn cục là đổi cả bốn trang đó. Scope theo container
   cho phép trang tạo có bảng màu riêng mà không chạm vào phần còn lại — và
   những tên trùng với token toàn cục (--ink-2, --line) chỉ bị ghi đè bên
   trong trang này.

   Ba giá trị đi lệch khỏi prototype, tất cả vì §9 ("Đo bằng công cụ, chỉnh
   token nếu trượt") — đo bằng WCAG relative luminance, số ghi ngay tại chỗ.
   ========================================================================= */

.vc {
  /* Nền & mực — lấy nguyên từ branding/tokens.css, đúng các giá trị mà
     style.css cũng vừa chuyển sang. Trước đây file này và style.css mỗi bên
     một sắc xám (ấm ở đây, lạnh ở kia), nên cùng một class .topbar-logo render
     ra hai màu tuỳ trang. Giờ hai stylesheet dùng chung một bảng neutral;
     phần còn lại (thang spacing, --ctl-h, --radius-lg…) vẫn riêng của trang này. */
  --bg: #fbfbf9; /* branding --bg */
  --sheet: #fcfcfb; /* branding --surface */
  --ink: #1c1917; /* branding --text */
  --ink-2: #6f6b64; /* branding --text-muted — 5.11 trên --bg */

  /* branding chỉ có MỘT mức chữ phụ, nên --ink-3 dùng chung giá trị với
     --ink-2 thay vì tự đặt thêm một sắc ("Never invent a colour"). Vẫn đạt
     5.11 / 5.16 / 4.69 trên --bg, --sheet, --fill. */
  --ink-3: #6f6b64;

  /* Hairline giữa các dòng: thuần trang trí, không phải viền của control nào,
     nên không áp ngưỡng 3:1. */
  --line: #e7e4de; /* branding --border */

  /* Token này vẽ viền của control nên áp ngưỡng 3:1 của WCAG 1.4.11 — từ khi
     bỏ appearance:auto thì viền này là thứ DUY NHẤT vẽ ra cái control.
     branding/tokens.css KHÔNG có token nào cho vai trò này (--border 1.22:1
     là hairline trang trí), nên giữ nguyên giá trị cũ thay vì tự chế màu mới.
     Đo lại trên bảng nền branding: 3.33 / 3.36 / 3.06 trên --bg, --sheet,
     --fill — vẫn đạt. */
  --line-2: #8d8a80; /* = branding --control-border */

  /* Viên thuốc đổi ngôn ngữ ở footer vẽ viền bằng token này. Cho nó bằng
     --line-2 để trên trang tạo, viền của nó khớp đúng viền select và ô mật
     khẩu thay vì lệch sang một sắc xám lạnh khác. */
  --control-border: #7c796f;

  --fill: #f3f1ec;

  /* Màu nhấn: DÙNG LẠI --seal của brand thay vì #D9432F của prototype (§3.1
     cho phép). Không chỉ để tránh hai sắc đỏ trong cùng app — #D9432F trượt
     WCAG ở cả hai vai trò (4.20:1 làm chữ, 4.38:1 với chữ trắng trên nút),
     còn #C9362B đạt 4.98 và 5.19. */
  /* Họ accent đỏ của branding (branding/README.md "Colour"): #c9362b sáng,
     #f0574a tối. Cùng giá trị với --seal bên style.css. */
  --accent: #c9362b;
  --accent-2: #b22e24;
  --accent-soft: #fbeae8;
  --on-accent: #ffffff;
  /* Núm của switch: trắng ở cả hai theme, như mọi switch iOS/Material. Tách
     thành token để không còn hex viết cứng trong create.css (§3.3). */
  --switch-knob: #ffffff;

  /* Khoảng cách — Fibonacci */
  --s1: 8px;
  --s2: 13px;
  --s3: 21px;
  --s4: 34px;
  --s5: 55px;
  --s6: 89px;

  /* Thang chữ — mỗi bậc × 1.618 */
  --t-cap: 13px;
  --t-body: 15px;
  --t-opt: 17px;
  --t-q: 34px;

  /* Bố cục — 610/987 = 0.618 */
  --col: 610px;

  /* Hộp chung cho control ở bảng tuỳ chọn — một chiều cao, một bề rộng, nên
     mép phải của switch/select/ô mật khẩu thẳng hàng. */
  --ctl-h: 34px;
  --ctl-w: 170px;

  --radius-lg: 21px;
  --radius-md: 13px;
  --radius-sm: 8px;

  /* Chuyển động — một easing, một thời lượng */
  --ease: cubic-bezier(0.22, 0.68, 0.16, 1);
  --dur: 180ms;

  --shadow-accent: 0 1px 2px rgb(201 54 43 / 20%), 0 8px 20px -10px rgb(201 54 43 / 45%);

  /* --font-mono chỉ dùng cho dữ liệu thật: bộ đếm ký tự, mã poll. Không dùng
     cho nhãn hay câu văn (§3.2).
     KHÔNG nạp IBM Plex Mono: CLAUDE.md cấm web font, §1.4 cấm thêm
     dependency, và CSP của app chặn thẳng style/font bên thứ ba. */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  .vc {
    /* Cùng nguồn với theme sáng: khối dark của branding/tokens.css, đúng các
       giá trị style.css cũng dùng. Trước đây nền tối ở đây là #111112 còn
       trang bỏ phiếu là #141417 — hai sắc đen khác nhau giữa hai trang. */
    --bg: #0f1115; /* branding --bg */
    --sheet: #171a21; /* branding --surface */
    --ink: #eef0f4; /* branding --text */
    --ink-2: #a2a3a8; /* branding --text-muted — 7.51 / 6.92 / 6.26 */
    --ink-3: #a2a3a8; /* một mức, như theme sáng */
    --line: #2c2e33; /* branding --border */

    /* Viền control, ngưỡng 3:1 của WCAG 1.4.11 — branding không có token cho
       vai trò này nên giữ nguyên giá trị cũ. Đo lại trên nền branding:
       3.92 / 3.61 / 3.27 trên --bg, --sheet, --fill. */
    --line-2: #6e727a;
    --control-border: #797d86;

    --fill: #212325;
    /* Họ đỏ của branding ở theme tối là #f0574a, không phải #ff6b54 — hai
       file trước đây mỗi bên một sắc. --accent-2 (hover) branding không định
       nghĩa, lấy đúng --seal-hover bên style.css để hai trang khớp. */
    --accent: #f0574a;
    --accent-2: #ff6d60;
    --accent-soft: #2c1b17;

    /* Accent sáng trên nền tối ⇒ chữ tối trên nút, không phải trắng
       (trắng chỉ đạt 3.41:1; #1A0F0C đạt 6.70). */
    --on-accent: #1a0b09; /* = --on-seal bên style.css, 5.63:1 trên --accent */

    --shadow-accent: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 20px -10px rgb(255 107 84 / 35%);
  }
}