/* QQ-ULIS tokens — nguồn: 02.2.qq-ulis-design-system.md (A1–A3).
   Sáng/tối: <html data-theme="light|dark|auto">; mỗi token dùng light-dark(sáng, tối).
   Mọi cặp màu chữ/nền đã kiểm WCAG (xem docs/05-ui-ux-guidelines.md). */

/* Font tự lưu trữ trong public/assets/fonts/ (CSP chỉ cho 'self'). Tách theo unicode-range, tiếng Việt có file riêng. */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/GoogleSansFlex-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/GoogleSansFlex-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/GoogleSansFlex-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/Newsreader-Italic-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/Newsreader-Italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/GeistMono-Regular.woff2') format('woff2');
}

:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="auto"] { color-scheme: light dark; }

:root {
  /* Màu chính #004780: luôn là NỀN nút (kèm chữ trắng 9.49:1). Chữ/icon/link xanh dùng --color-primary-fg
     vì #004780 không đủ tương phản trên nền tối. */
  --color-primary: #004780;
  --color-primary-hover: light-dark(#003660, #005a9e);
  --color-on-primary: #ffffff;
  --color-primary-edge: light-dark(#004780, #4d8bbf); /* viền nút/công tắc xanh: tách khỏi nền tối (≥3:1) */
  --color-primary-fg: light-dark(#004780, #7eb1d6);
  --color-primary-fg-hover: light-dark(#003660, #a3c8e4);
  --color-secondary: light-dark(#f0f4f8, #1a2d40);

  /* Điểm nhấn cam #ff5500. Chỉ dùng làm nền/đường kẻ/icon lớn (3.21:1 trên trắng) hoặc chữ trên nền tối.
     Chữ trên nền cam phải là navy (5.83:1) — chữ trắng chỉ đạt 3.21:1. Chữ cam cỡ nhỏ trên nền sáng dùng --color-accent-text.
     Không đặt cam lên #004780 (2.96:1) hay lên nền bg-tertiary sáng (2.76:1). */
  --color-accent: #ff5500;
  --color-accent-hover: #e64d00;
  --color-on-accent: #0a131c;
  --color-accent-text: light-dark(#b83d00, #ff5500);

  /* Nền */
  --color-bg-primary: light-dark(#ffffff, #0a131c);
  --color-bg-secondary: light-dark(#f5f8fa, #0e1a26);
  --color-bg-tertiary: light-dark(#e6eff7, #15283a);
  --color-bg-dark: #0a131c;
  --color-surface: light-dark(#ffffff, #112031);

  /* Chữ */
  --color-text-primary: light-dark(#0a131c, #e9f0f6);
  --color-text-secondary: light-dark(#202f3e, #c5d3e0);
  --color-text-muted: light-dark(#506275, #98abbd);
  --color-text-on-dark: #c5d3e0;

  /* Đường kẻ và viền. Viền input phải đạt 3:1 (B1) nên tách riêng khỏi viền card. */
  --color-border: light-dark(#d0dfed, #2b4157);
  --color-border-input: light-dark(#6b7f93, #6f8aa3);
  --color-divider: light-dark(#d0dfed, #2b4157);
  --color-focus: light-dark(#1d70b8, #7eb1d6);

  /* Trạng thái (chữ đã hiệu chỉnh contrast). Thành công dùng bộ màu Thông tin + icon dấu tích. */
  --color-warn-bg: light-dark(#fbf3e2, #2b2210);
  --color-warn-text: light-dark(#8a5a12, #f2c777);
  --color-info-bg: light-dark(#e3ecf5, #10293f);
  --color-info-text: light-dark(#155a94, #92c4ea);
  --color-error-bg: light-dark(#fdf2f2, #2f1618);
  --color-error-text: light-dark(#c53030, #f4a6a6);

  --shadow-card: 0 40px 90px -40px light-dark(rgba(0, 71, 128, 0.03), rgba(0, 0, 0, 0.5));
  --shadow-primary: 0 10px 24px -10px light-dark(rgba(0, 71, 128, 0.5), rgba(0, 0, 0, 0.7));
  --shadow-lift: 0 14px 30px -10px light-dark(rgba(0, 71, 128, 0.12), rgba(0, 0, 0, 0.6));
  --gradient-dawn: linear-gradient(135deg, #0a131c 0%, #004780 55%, #7eb1d6 100%);

  /* Chữ */
  --font-sans: 'Google Sans Flex', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  /* Cambria / Times New Roman có đủ glyph tiếng Việt; Georgia thiếu một số chữ (ầ, ẫ...) nên để sau cùng. */
  --font-serif: 'Newsreader', 'Lora', Cambria, 'Times New Roman', Georgia, serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', 'Roboto Mono', Consolas, 'Courier New', monospace;
  --fs-h1: clamp(38px, 6vw, 72px);
  --fs-h2: clamp(28px, 3.8vw, 46px);
  --fs-h3: clamp(20px, 2.2vw, 24px);
  --fs-body: clamp(15px, 0.9vw + 12px, 16px);
  --fs-small: 14px;

  /* Bố cục */
  --container: 80rem;
  --gap: clamp(24px, 3vw, 32px);
  --section-y: clamp(72px, 4.5vw + 56px, 96px);
  --page-y: clamp(24px, 3vw, 48px);
  --radius-card: 22px;
  --radius-inner: 14px;
  --radius-field: 10px;
  --touch: 44px;
}