/* ═══════════════════════════════════════════════════════════════════════
   TOKENS — NGUỒN DUY NHẤT
   Nạp TRƯỚC app.css và desktop.css. Các file khác chỉ TIÊU THỤ token, không
   tự định nghĩa lại.

   Ba tầng:
     1. THƯƠNG HIỆU  màu gốc — sửa nhận diện chỉ sửa đúng khối này
     2. NGỮ NGHĨA    bề mặt, viền, chữ, trạng thái, độ nổi — dẫn xuất từ tầng 1
     3. MẬT ĐỘ      khoảng cách, cỡ chữ, khung desktop — KHÔNG chứa màu

   ĐỢT 2 (đang áp dụng): lấy bảng màu Kiosk gọi số của trường làm chuẩn.
   Trước đó màu thương hiệu ĐỔI khi kéo cửa sổ qua mốc 1024px (#a0003d ↔
   #8b0d2f, gradient mận→teal ↔ mận→đỏ). Nay chỉ còn một giá trị duy nhất.
   Teal #0f766e bị loại — không có trong bộ nhận diện nào của trường.

   Mọi tỉ lệ tương phản ghi trong file này đều đo bằng công thức WCAG 2.1.
═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ══ TẦNG 1 — THƯƠNG HIỆU ════════════════════════════════════════════
     Nguồn: bảng màu Kiosk gọi số (D:\All APP\bamsothutu), đối chiếu với
     Phiếu đăng ký chương trình học. Đổi nhận diện = chỉ sửa 10 dòng dưới. */
  --brand-wine:       #8B1A2E;   /* mận chính — trắng trên nền này 9.19:1 */
  --brand-wine-dark:  #6A1222;   /* thanh trên/dưới, trạng thái nhấn — 12.19:1 */
  --brand-wine-light: #B02040;   /* đuôi gradient, hover — 6.72:1 */
  --brand-gold:       #C8941A;   /* CHỈ viền/trang trí: 2.72:1 trên trắng, KHÔNG đủ làm chữ */
  --brand-gold-soft:  #D4A843;
  --brand-cream:      #FDF7EC;   /* nền mặt tiền (đăng nhập, trang chọn ứng dụng) */
  --brand-cream-deep: #F5EAD0;   /* vùng nhấn trên nền kem */
  --brand-ivory:      #FFFAF0;
  --brand-ink:        #271116;   /* nâu đen ấm — thay #172033 xanh đen lạnh */
  --brand-green:      #2A7A3B;   /* chấm "đang hoạt động", trạng thái tốt — 5.32:1 */

  /* ══ TẦNG 2 — NGỮ NGHĨA ═══════════════════════════════════════════════ */

  /* ── Bề mặt ───────────────────────────────────────────────────────── */
  --bg:#FAF8F5;                  /* nền màn làm việc — trắng ngà, ấm mà không mỏi mắt */
  --card:#FFFFFF;
  --d-surface:#FFFFFF;
  --d-surface-raised:#FFFFFF;    /* nổi bằng bóng, không đổi tông màu */
  --d-surface-sunken:#F5F2ED;    /* đầu bảng, giếng, chân phân trang */
  --d-surface-hover:#F5F2ED;
  --d-surface-active:#EFEAE3;
  --d-surface-sel:#FBF0F2;       /* đang chọn — ám mận */
  --d-card-2:#F5F2ED;            /* bí danh cũ giữ cho tương thích */

  /* ── Viền — ám mận thay vì xám lạnh, theo cách làm của bản Đăng ký ──
     Đây là kẻ trang trí (1.3–1.7:1). Viền chức năng của ô nhập liệu cần
     ≥3:1 — hiện chưa đạt, đã ghi vào việc của Đợt 4 (khả năng tiếp cận). */
  --d-border-subtle:rgba(139,26,46,.10);
  --border:rgba(139,26,46,.16);
  --d-border-strong:rgba(139,26,46,.28);
  --d-border-focus:var(--brand-wine);

  /* ── Chữ — đo trên cả 4 bề mặt, lấy giá trị thấp nhất ─────────────── */
  --text-primary:var(--brand-ink);  /* 15.96 – 17.83:1 */
  --text-secondary:#5A4A44;         /* 7.53 – 8.41:1 */
  --text-muted:#6E5B55;             /* 5.72 – 6.38:1 — dùng 161 chỗ nên phải chắc.
                                       Giá trị cũ #94a3b8 chỉ đạt ~2.6:1, dưới chuẩn AA. */
  --d-text-inverse:#FFFFFF;

  /* ── Thương hiệu (bí danh ngữ nghĩa của tầng 1) ───────────────────── */
  --primary:var(--brand-wine);
  --primary-dark:var(--brand-wine-dark);
  --primary-light:#FBF0F2;
  --grad-start:var(--brand-wine);
  --grad-end:var(--brand-wine-light);   /* trước là teal #0f766e */
  --d-gold:var(--brand-gold);
  --d-hairline-gold:var(--brand-gold-soft);
  --d-gold-soft:#D9CFC4;                /* thumb thanh cuộn — trung tính ấm */
  --d-header-bg:#FFFFFF;
  --d-rail-bg:#FFFFFF;

  /* ── Trạng thái — một ngôn ngữ chung cho mọi badge ────────────────── */
  --d-ok:var(--brand-green); --d-ok-bg:#E9F4EC;   --d-ok-bd:#BFDFC8;   /* 5.32:1 */
  --d-warn:#8A5A00;         --d-warn-bg:#FDF3E2; --d-warn-bd:#EFD9AC;  /* 5.93:1 */
  --d-err:#A3231B;          --d-err-bg:#FDECEA;  --d-err-bd:#F2C4BF;   /* 7.46:1 */
  --d-info:#1C5A99;         --d-info-bg:#EAF2FB; --d-info-bd:#C2D9F0;  /* 7.07:1 */
  --d-neutral:#5A4A44;      --d-neutral-bg:#F5F2ED; --d-neutral-bd:rgba(139,26,46,.16);
  --success:var(--brand-green);
  --warning:#8A5A00;
  --danger:#A3231B;

  /* ── Độ nổi — 4 mức, bóng ÁM MẬN thay vì xám lạnh ────────────────── */
  --d-e1:0 1px 2px rgba(106,18,34,.07);
  --d-e2:0 1px 2px rgba(106,18,34,.07), 0 4px 10px -2px rgba(106,18,34,.09);
  --d-e3:0 2px 6px -1px rgba(106,18,34,.08), 0 14px 28px -8px rgba(106,18,34,.13);
  --d-e4:0 10px 20px -6px rgba(106,18,34,.11), 0 28px 60px -16px rgba(106,18,34,.24);
  --shadow:var(--d-e2);
  --shadow-lg:var(--d-e4);
  /* Mép sticky: 1px cứng + blur ngắn. Đây KHÔNG phải bóng thẻ. */
  --d-sticky-edge:0 1px 0 0 var(--d-border-strong), 0 6px 10px -8px rgba(106,18,34,.28);

  /* ── Hình khối ────────────────────────────────────────────────────── */
  --radius:8px;
  --radius-sm:8px;
  --d-radius-lg:12px;
  --d-radius-pill:999px;

  /* ── Chữ ──────────────────────────────────────────────────────────── */
  --d-sans:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --d-serif:'Playfair Display','Iowan Old Style',Georgia,'Times New Roman',serif;
  --font-sans:var(--d-sans);
  --font-serif:var(--d-serif);
  --font-mono:ui-monospace,'SFMono-Regular',Consolas,monospace;

  /* ══ TẦNG 3 — MẬT ĐỘ (không chứa màu) ════════════════════════════════ */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --tab-h:54px;
  --header-h:72px;
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}

/* ── TẦNG 1 THƯƠNG HIỆU — mặt tiền dùng nền kem, ở MỌI bề ngang ──────────
   Đăng nhập và trang chọn ứng dụng là ấn tượng đầu tiên nên bám sát bộ nhận
   diện; màn làm việc dùng trắng ngà để nhìn cả ngày không mỏi mắt. */
#login-screen,
#landing-screen {
  --bg:var(--brand-cream);
  --card:#FFFFFF;
  --d-surface:#FFFFFF;
  --d-surface-sunken:#FBF3E6;
  --d-surface-hover:#FDF9F2;
  --d-surface-active:var(--brand-cream-deep);
  --d-border-subtle:rgba(200,148,26,.22);
  --border:rgba(200,148,26,.34);
  --d-border-strong:var(--brand-gold-soft);
  --d-e1:0 1px 2px rgba(106,18,34,.07);
  --d-e2:0 2px 4px rgba(106,18,34,.06), 0 8px 20px -4px rgba(106,18,34,.10);
  --d-e3:0 4px 10px -2px rgba(106,18,34,.08), 0 20px 40px -10px rgba(106,18,34,.14);
  --d-e4:0 14px 28px -8px rgba(106,18,34,.12), 0 36px 72px -20px rgba(106,18,34,.24);
}

@media (min-width:1024px) {
  :root {
    /* ── Chỉ MẬT ĐỘ và khung — màu đã thống nhất ở trên, không đè nữa ── */
    --radius-sm:6px;
    --fs-display:40px;
    --fs-h1:28px;
    --fs-h2:21px;
    --fs-h3:17px;
    --fs-body:15px;
    --fs-sm:13px;
    --fs-xs:11.5px;

    /* Khung desktop */
    --d-rail:248px;
    --d-topbar:64px;
    --d-max:1280px;
    --d-gutter:32px;
    --d-inset:16px;               /* lề trong chuẩn cho mọi dải điều khiển */
    --d-pane-top:24px;            /* nhịp trên cho pane không có thanh ghim */
    --d-prose:58ch;
  }
}

@media (min-width:1600px) {
  :root {
    --d-max:1440px;
  }
}

/* Tăng tương phản khi hệ điều hành yêu cầu */
@media (prefers-contrast:more) {
  :root {
    --d-border-subtle:rgba(139,26,46,.30);
    --border:rgba(139,26,46,.45);
    --d-border-strong:rgba(139,26,46,.62);
    --text-muted:var(--text-secondary);
  }
}