/* ============================================================
   DESIGN TOKENS — LastRitesFilm.com
   Brand A · LastRites Archive  (light / paper, EN)
   Brand B · ReviewFilm         (dark only, VI)

   Token GỐC = đúng tên trong brief, map thẳng sang code.
   Token DẪN XUẤT = biến phụ sinh ra từ token gốc, đặt tên rõ
   là dẫn xuất để dev biết chỗ nào được phép đổi.
   ============================================================ */

:root {
  /* ---------- Brand A · GỐC ---------- */
  --lr-ink:            #14100E;   /* hero + footer */
  --lr-paper:          #F3EDE3;   /* nền body */
  --lr-paper-2:        #E8DFD1;   /* card, divider block */
  --lr-gold:           #C9A227;   /* accent duy nhất */
  --lr-text:           #241E1A;
  --lr-muted:          #6B5F55;

  /* ---------- Brand A · DẪN XUẤT ---------- */
  --lr-surface-2:      #F8F3EA;   /* nút nguồn */
  --lr-surface-3:      var(--lr-paper-2);   /* mat quanh ảnh — đúng token brief */
  --lr-body:           #4A403A;   /* đoạn văn */
  --lr-body-2:         #5A4F46;   /* value trong Film Details */
  --lr-faint:          #6B5F55;   /* disclaimer, hint — 5.33:1 trên giấy (#8A7D70 chỉ 3.44:1) */
  --lr-rule:           #DCD1C0;   /* hairline 1px — đậm hơn --lr-paper-2 có chủ đích, xem HANDOFF §5 */
  --lr-rule-2:         #E2D8C8;   /* hairline nhạt (list mobile) */
  --lr-rule-3:         #D0C4B2;   /* viền nút, viền mat */
  --lr-gold-ink:       #7E6506;   /* gold trên nền giấy — 4.86:1 (#9A7C1C chỉ 3.42:1) */
  --lr-hero-text:      #F3EDE3;
  --lr-hero-muted:     #8C8073;
  --lr-hero-dim:       #BCAF9F;   /* nav item chưa active */
  --lr-hero-rule:      #26201C;
  --lr-hero-line:      rgba(243, 237, 227, .16);

  --lr-font-display:   'EB Garamond', Georgia, 'Times New Roman', serif;
  --lr-font-body:      'Source Sans 3', system-ui, -apple-system, sans-serif;
  --lr-font-mono:      'IBM Plex Mono', ui-monospace, monospace;

  --lr-pad-x:          24px;      /* padding ngang mobile */

  /* ---------- Brand B · GỐC ---------- */
  --rp-bg:             #0A0A0B;   /* nền trang */
  --rp-surface:        #141416;   /* khung player, header */
  --rp-sheet:          #1C1C1F;   /* bottom sheet, dropdown */
  --rp-red:            #E11D2E;   /* accent duy nhất */
  --rp-red-hot:        #FF2A3C;   /* hover / active / chữ đỏ cỡ nhỏ */
  --rp-text:           #FFFFFF;
  --rp-muted:          #9A9AA0;
  --rp-border:         rgba(255, 255, 255, .10);

  /* ---------- Brand B · DẪN XUẤT ---------- */
  --rp-surface-2:      #0C0C0E;   /* footer */
  --rp-elev:           #232327;   /* blockquote */
  --rp-elev-2:         #2C2C32;   /* avatar */
  --rp-track:          #3A3A40;   /* rãnh thanh điểm, drag handle */
  --rp-text-2:         #C4C4CA;   /* đoạn văn trong sheet */
  --rp-fine:           #8A8A90;   /* fine print — contrast 4.5:1 */
  --rp-border-soft:    rgba(255, 255, 255, .07);
  --rp-scrim:          rgba(0, 0, 0, .55);
  --rp-glow:           0 0 34px rgba(225, 29, 46, .55);
  --rp-glow-soft:      0 0 22px rgba(225, 29, 46, .30);

  --rp-font:           'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --rp-font-mono:      'IBM Plex Mono', ui-monospace, monospace;

  --rp-r-frame:        16px;      /* khung player / sheet: 12–16px */
  --rp-r-sheet:        22px;
  --rp-r-pill:         999px;
  /* Kích thước header — RESPONSIVE, redefine ở @media dưới cùng file.
     Mọi thứ neo vào header (dropdown, thanh trên của menu, chiều cao feed,
     inset của panel desktop) phải đọc 2 biến này, không hardcode. */
  --rp-header-h:       56px;
  --rp-header-px:      16px;
}

/* ============ RESET DÙNG CHUNG ============ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body { margin: 0; }

img, svg { display: block; max-width: 100%; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Focus ring — luôn nhìn thấy được (A11y) */
/* QF-3 — LỆCH KHỎI TEMPLATE CÓ CHỦ Ý, PO duyệt 2026-08-07 ("Sửa màu viền focus Brand A").
   Template dùng var(--lr-gold) #C9A227. Trên nền giấy --lr-paper #F3EDE3 chỉ đạt 2,08:1,
   dưới ngưỡng SC 1.4.11 Non-text Contrast mức AA (>= 3:1) — viền focus KHÔNG phải text nên
   nó thuộc 1.4.11 chứ không phải 1.4.3, và phép quét tương phản cũ chỉ quét text node nên
   bỏ sót chỗ này (DESIGN_SYSTEM §B4).
   Đổi sang var(--lr-gold-ink) #7E6506 — biến thể an toàn ĐÃ CÓ SẴN trong chính hệ thống
   (sinh ra cùng lý do: --lr-gold không đủ tương phản khi làm màu chữ). Đo lại trên mọi nền
   THẬT của Brand A: giấy 4,81 · card 4,24 · nút 5,06 · hero/footer 3,38 — đạt cả 5/5.
   Đánh đổi đã biết: trên hero tối, gold-ink 3,38 thấp hơn gold 7,82, nhưng vẫn qua ngưỡng AA.
   Brand B KHÔNG ảnh hưởng: review.css:30 `.rp :focus-visible` ghi đè (độ ưu tiên 0,2,0 > 0,1,0)
   và body mang class "rp" nên phủ mọi phần tử con.
   C-15 (dựng đúng template) cố ý bị lệch ĐÚNG MỘT GIÁ TRỊ này; mọi token khác giữ nguyên. */
:focus-visible {
  outline: 2px solid var(--lr-gold-ink);
  outline-offset: 3px;
}

/* prefers-reduced-motion được tôn trọng */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============ PLACEHOLDER ẢNH ============
   Ảnh thật thay sau — poster/still phim có bản quyền.
   Giữ đúng tỉ lệ + label mô tả. */
.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, #1E1915 0 11px, #26201A 11px 22px);
}
.ph__label {
  font-family: var(--lr-font-mono);
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: .05em;
  color: #9C8B7A;              /* 4.91:1 trên nền sọc tối */
  text-align: center;
}
.ph__label span { color: #948678; }   /* 4.56:1 */
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--9x16 { aspect-ratio: 9 / 16; }
.ph--4x5  { aspect-ratio: 4 / 5; }
.ph--2x3  { aspect-ratio: 2 / 3; }
.ph--3x4  { aspect-ratio: 3 / 4; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Brand B · header desktop. Redefine ở đây để .rp-dropdown / .rp-menu__top /
   .rp-feed / .rp-sheet tự khớp, không cần override riêng từng cái. */
@media (min-width: 1024px) {
  :root {
    --rp-header-h:  68px;
    --rp-header-px: 48px;
  }
}