/* ============================================================================
   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 */
  --bg: #fbfaf8;
  --sheet: #ffffff;
  --ink: #17181a;
  --ink-2: #5c6066;

  /* Prototype để #A0A4AA: 2.40:1 trên --bg, 2.50:1 trên --sheet. Đây là màu
     của placeholder và bộ đếm — chữ thật, cần 4.5:1. #6F737A cho 4.57 / 4.76. */
  --ink-3: #6f737a;

  /* 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 — giữ đúng giá trị prototype. */
  --line: #eae8e3;

  /* Prototype để #D6D3CC: 1.49:1. Token này vẽ viền của control, nên áp 3:1.
     #949086 đạt 3.19 trên --sheet nhưng chỉ 2.82 trên --fill — mà bảng tuỳ
     chọn nền --fill chính là nơi select và ô mật khẩu nằm, và từ khi bỏ
     appearance:auto thì viền này là thứ DUY NHẤT vẽ ra cái control. #8D8A80
     đạt 3.06 / 3.45 / 3.31 trên cả --fill, --sheet và --bg. */
  --line-2: #8d8a80;

  --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. */
  --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;

  --r-sheet: 18px;
  --r-ctl: 13px;
  --r-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: 0 1px 2px rgb(23 24 26 / 4%), 0 8px 24px -12px rgb(23 24 26 / 10%);
  --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 {
    --bg: #111112;
    --sheet: #1a1b1d;
    --ink: #ededeb;
    --ink-2: #9da0a6;

    /* Prototype #6B6F75 = 3.73:1, dưới AA. #7C8087 cho 4.76. */
    --ink-3: #7c8087;

    --line: #292b2e;

    /* Prototype #3A3D41 = 1.58:1. #666A70 chỉ đạt 2.90 trên --fill (xem ghi
       chú ở theme sáng); #6E727A cho 3.27 / 3.57. */
    --line-2: #6e727a;

    --fill: #212325;
    --accent: #ff6b54;
    --accent-2: #ff8471;
    --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: #1a0f0c;

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