/* UKAV — design tokens
   Nguồn sự thật duy nhất về màu, chữ và nhịp. Brand Book và website (sắp dựng lại)
   đều đọc từ file này. Sửa ở đây là đổi mọi nơi. Không gõ mã màu rời ở file khác.

   HAI MÀU GỐC rút thẳng từ file logo chính thức (Logo màu.png), đo bằng trung vị
   điểm ảnh, không đoán bằng mắt:
     Xanh UKAV  #044C74  — chữ ALUMNI và vòng @
     Đỏ UKAV    #EB1F26  — chữ UK và chữ VIETNAM
   Xanh + đỏ + trắng là ba màu của cờ Union Jack — đó là lý do hệ thống chỉ có
   ba màu chính. Hai màu phụ (Mực, Sương) pha từ chính màu xanh, không thêm sắc mới.

   TỶ LỆ DIỆN TÍCH:  Trắng/Sương 60%  ·  Xanh/Mực 30%  ·  Đỏ 10%

   LUẬT CỨNG
   1. Đỏ không vượt 10% diện tích. Vượt là trông như banner khuyến mãi.
   2. Không đặt chữ đỏ trên nền xanh — tương phản 2,1:1, không đọc được.
   3. Chữ đỏ cỡ nhỏ (dưới 18px) dùng Đỏ chữ #C8141B, không dùng Đỏ UKAV. */

:root {
  /* Năm màu của hệ thống */
  --u-navy:  #044C74; /* Xanh UKAV — MÀU THƯƠNG HIỆU CHÍNH, từ logo */
  --u-red:   #EB1F26; /* Đỏ UKAV — điểm nhấn, từ logo */
  --u-white: #FFFFFF; /* Trắng — nền chính */
  --u-ink:   #0B1F33; /* Mực Thames — chữ nội dung, nền tối */
  --u-mist:  #E9EFF4; /* Sương London — nền phụ, khối thông tin */

  /* Sắc độ dẫn xuất — pha từ năm màu trên, không thêm màu mới */
  --u-navy-04: #F6F8FA;
  --u-navy-08: #EEF3F7;
  --u-navy-16: #DCE6EE;
  --u-navy-32: #B6CAD9;
  --u-navy-60: #5A86A3;
  --u-navy-80: #033A59;
  --u-red-08:  #FDEDEE;
  --u-red-txt: #C8141B; /* Đỏ chữ — bản đậm hơn của Đỏ UKAV, đạt AA cho chữ nhỏ */
  --u-ink-60:  #5A6878;
  --u-ink-80:  #33465A;

  /* Vai trò — viết component thì dùng nhóm này, không dùng thẳng màu gốc */
  --paper:     var(--u-white);
  --paper-alt: var(--u-navy-04);
  --ink:       var(--u-ink);
  --ink-muted: var(--u-ink-60);
  --brand:     var(--u-navy);
  --brand-alt: var(--u-navy-80);
  --accent:    var(--u-red);
  --accent-txt: var(--u-red-txt);
  --rule:      var(--u-navy-16);

  /* Tương phản đã tính theo WCAG trên nền trắng:
       Mực 16,7:1 AAA · Xanh UKAV 9,2:1 AAA · Mực 60 5,7:1 AA
       Đỏ chữ 5,9:1 AA · Đỏ UKAV 4,4:1 — chỉ đạt cho chữ lớn (≥ 24px, hoặc ≥ 19px đậm)
       Trắng trên Xanh UKAV 9,2:1 AAA · Xanh trên Sương 7,9:1 AAA
       Đỏ trên Xanh 2,1:1 — CẤM. */

  /* Chữ. HAI FONT, cả hai có trên Canva, Figma, Google Docs/Slides, Google Fonts và gõ được
     tiếng Việt (Canva không có Be Vietnam Pro — chỉ có bản cũ Be Vietnam, nên không dùng):
       Playfair Display — tiêu đề, tên chương trình, tiêu đề website và slide
       Montserrat       — mọi chữ còn lại: trích dẫn, tên người, thông tin, nhãn, nội dung
     Font thứ ba tuỳ chọn chỉ cho tên sự kiện trong vùng tự do của Events. */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-text:    'Montserrat', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Thang cỡ chữ — tỷ lệ 1,25 */
  --t-xs:   0.72rem;
  --t-sm:   0.84rem;
  --t-base: 1rem;
  --t-md:   1.15rem;
  --t-lg:   1.45rem;
  --t-xl:   1.9rem;
  --t-2xl:  2.5rem;
  --t-3xl:  3.4rem;

  --lh-tight: 1.18;
  --lh-body:  1.62;

  /* Nhịp dọc — bội số của 4px */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  --radius: 4px;
}