/* Token của giao diện công khai "Bàn làm việc" (ADR-0045). Nguồn: design-handoff/design/design-system/tokens.json.
   Tiền tố --d- vì styles.css đã có --ink, --paper, --muted, --line với giá trị khác (Xưởng); không đổi tên thành --ink… */
/* Phông dự phòng có size-adjust (ADR-0045 D6): khi Lora hay Be Vietnam Pro chưa về, Georgia và Segoe UI (máy không có thì Arial) được co giãn để chiếm gần
   đúng bề rộng của phông web, nên chữ không đổi chỗ xuống dòng lúc phông về. Đo ngày 10/10/2026: tên "Bài Giảng Sáng Tạo" ở header 390px rộng 241px bằng
   Georgia, 229px bằng Lora, header chỉ dư 0px nên một khung hình phông tải dở đẩy nút Menu xuống hàng hai rồi kéo lên (CLS trang chủ 0,123).
   Tỉ lệ đo bằng canvas trên chữ tiếng Việt của trang; tests/public-home.test.mjs giữ độ lệch dưới 3%. font-synthesis: none (styles.css) nên mỗi độ đậm có mặt riêng. */
@font-face { font-family: "Lora Fallback"; font-weight: 400 500; src: local("Georgia"); size-adjust: 92%; }
@font-face { font-family: "Lora Fallback"; font-weight: 600; src: local("Georgia Bold"), local("Georgia-Bold"); size-adjust: 91%; }
@font-face { font-family: "Lora Fallback"; font-weight: 700 900; src: local("Georgia Bold"), local("Georgia-Bold"); size-adjust: 91.8%; }
@font-face { font-family: "Be Vietnam Pro Fallback"; font-weight: 300 500; src: local("Segoe UI"), local("SegoeUI"), local("Arial"), local("ArialMT"); size-adjust: 110%; }
@font-face { font-family: "Be Vietnam Pro Fallback"; font-weight: 600; src: local("Segoe UI Semibold"), local("SegoeUI-Semibold"), local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 109%; }
@font-face { font-family: "Be Vietnam Pro Fallback"; font-weight: 700 900; src: local("Segoe UI Bold"), local("SegoeUI-Bold"), local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 107%; }
:root {
  /* Màu (tokens.json, mục color). Ô tính năng: tile-* là nền, tile-*-ink chỉ để vẽ nét minh họa, không làm chữ. */
  --d-paper: #FBF8F1;
  --d-surface: #FFFFFF;
  --d-line: #E8E1D3;
  --d-line-strong: #D8CFBE;
  --d-ink: #1D2B28;
  --d-ink-soft: #2F3D39;
  --d-muted: #5E6B66;
  --d-brand: #117768;
  --d-brand-deep: #0B4F45;
  --d-brand-tint: #DDF0EA;
  --d-chalk: #1F3B35;
  --d-chalk-line: #4F6B63;
  --d-chalk-text: #F4F1E8;
  --d-chalk-muted: #A9C9C0;
  --d-wood: #C9A46A;
  --d-wood-deep: #B08A52;
  --d-sun: #F2B33D;
  --d-sun-ink: #2C1F00;
  --d-sun-tint: #FCEFCF;
  --d-sun-text: #6B4800;
  --d-alert: #D93A2B;
  --d-danger-text: #8E2B2B;
  --d-danger-tint: #F9E5E5;
  --d-tile-teal: #BFE4D6;
  --d-tile-teal-ink: #117768;
  --d-tile-amber: #F9D98C;
  --d-tile-amber-ink: #9A6A0E;
  --d-tile-cyan: #B2DFE6;
  --d-tile-cyan-ink: #156B78;
  --d-tile-stone: #D9D6CE;
  --d-tile-stone-ink: #5A6475;
  --d-tile-sky: #BCD6F2;
  --d-tile-sky-ink: #235C9C;
  --d-tile-violet: #CEC6F0;
  --d-tile-violet-ink: #4E3FA0;
  --d-tile-rose: #EFBFD0;
  --d-tile-rose-ink: #963558;
  --d-tile-peach: #F7C2A8;
  --d-tile-peach-ink: #B8481F;
  --d-tile-sage: #C3D4CE;
  --d-tile-sage-ink: #34504A;
  --d-tile-ochre: #EACB94;
  --d-tile-ochre-ink: #7A5208;
  --d-tile-lime: #C2E0B9;
  --d-tile-lime-ink: #2E6E31;
  --d-tile-coral: #F2B7AB;
  --d-tile-coral-ink: #A83224;
  --d-team-1: #117768;
  --d-team-2: #235C9C;
  --d-team-3: #8A5E0B;
  --d-team-4: #B8481F;
  --d-deco-sun: #FCEFCF;
  --d-deco-mint: #E3F2EC;
  --d-deco-leaf: #C9E6DB;
  --d-deco-peach: #FBE3D8;
  --d-dot: #D9CFBB;

  /* Viền ô nhập, ô tìm, chip chưa chọn: line-strong của thiết kế chỉ 1,46:1 trên giấy, ranh giới cần 3:1 (ADR-0045 mục 3). 3,59:1 trên giấy, 3,81:1 trên trắng. */
  --d-line-input: #8A8272;

  /* Khoảng cách */
  --d-space-1: 4px;
  --d-space-2: 8px;
  --d-space-3: 12px;
  --d-space-4: 16px;
  --d-space-5: 20px;
  --d-space-6: 24px;
  --d-space-7: 30px;
  --d-space-9: 36px;
  --d-space-ipad: 28px;

  /* Bo góc */
  --d-radius-sm: 10px;
  --d-radius-md: 14px;
  --d-radius-lg: 18px;
  --d-radius-xl: 24px;
  --d-radius-tile: 30px;
  --d-radius-pill: 999px;

  /* Chiều cao điều khiển: không nút nào thấp hơn control-s */
  --d-control-s: 44px;
  --d-control-m: 52px;
  --d-control-l: 64px;
  --d-control-xl: 72px;

  /* Bóng: chỉ nút sun lớn trên bảng đen, như phím ấn; không bóng đổ mờ */
  --d-shadow-press: 0 4px 0 #B07A06;

  /* Họ chữ */
  --d-font-display: "Lora", "Lora Fallback", Georgia, serif;
  --d-font-sans: "Be Vietnam Pro", "Be Vietnam Pro Fallback", "Segoe UI", Arial, sans-serif;

  /* Cỡ chữ: mọi cỡ nhân với --d-text-scale (1; chữ to "Aa" đặt 1,15 ở bên dưới), nên thành phần không viết px cố định cho chữ */
  --d-text-scale: 1;
  --d-fs-hero: calc(38px * var(--d-text-scale));
  --d-fs-title-xl: calc(34px * var(--d-text-scale));
  --d-fs-title-l: calc(30px * var(--d-text-scale));
  --d-fs-title-m: calc(28px * var(--d-text-scale));
  --d-fs-title-s: calc(22px * var(--d-text-scale));
  --d-fs-chalk-italic: calc(18px * var(--d-text-scale));
  --d-fs-body-l: calc(20px * var(--d-text-scale));
  --d-fs-body: calc(18px * var(--d-text-scale));
  --d-fs-label: calc(18px * var(--d-text-scale));
  --d-fs-line: calc(17px * var(--d-text-scale));
  --d-fs-caption: calc(16px * var(--d-text-scale));
  --d-fs-badge: calc(14px * var(--d-text-scale));
  --d-lh-hero: 1.2;
  --d-lh-title-xl: 1.12;
  --d-lh-title-l: 1.2;
  --d-lh-title-m: 1.2;
  --d-lh-title-s: 1.3;
  --d-lh-chalk-italic: 1.4;
  --d-lh-body-l: 1.6;
  --d-lh-body: 1.6;
  --d-lh-label: 1.3;
  --d-lh-line: 1.3;
  --d-lh-caption: 1.45;
  --d-lh-badge: 1.2;
}
/* Chữ to ("Aa", lớp large-text trên <html>) phóng chữ lên 115% (design-system README, nguyên tắc 2). */
:root.large-text { --d-text-scale: 1.15; }