/* ============================================================
   QBIS theme tokens — port nguyên từ ThemeSaaSQBIS / QBIS App.dc.html
   Không tự invent palette.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --primary: #2041B4;
  --primary-hover: #1b3797;
  --primary-soft: rgba(32, 65, 180, 0.09);
  --primary-soft2: rgba(32, 65, 180, 0.16);
  --primary-line: rgba(32, 65, 180, 0.28);
  --on-primary: #fff;
  --bg: #F5F7FB;
  --surface: #FFFFFF;
  --surface-2: #FAFBFD;
  --surface-3: #F0F3F9;
  --border: #E4E9F2;
  --border-strong: #CFD8E8;
  --field-line: #A9B6CE;
  --text-1: #0F1E3D;
  --text-2: #4C5B79;
  --text-3: #8494B0;
  --nav-text-1: #FFFFFF;
  /* Light-mode login panel: tương đương color-mix(primary 96%, black) */
  --nav-bg: #1f40b0;
  --nav-line: #1a3699;
  --nav-text: #c4d0ee;
  --ok: #0F7A45;
  --ok-soft: #E4F5EC;
  --warn: #B26A00;
  --warn-soft: #FDF1DE;
  --danger: #C42B2B;
  --danger-soft: #FCECEC;
  --info: #1A63C4;
  --info-soft: #E8F1FD;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --sh-1: 0 1px 2px rgba(15, 30, 61, 0.06);
  --sh-2: 0 4px 14px rgba(15, 30, 61, 0.08);
  --sh-3: 0 16px 44px rgba(15, 30, 61, 0.16);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;
  --ink: #222;
  --overlay: rgba(15, 30, 61, 0.42);
  --scrim: #0F1E3D;
  --black: #000;
  --teal: #0F9488;
  --accent-yellow: #FCDA0C;
  --accent-orange: #E67E22;
  /* Bám theo màu thương hiệu đang chọn (kể cả mainColor đơn vị set lúc chạy) */
  --brand-navy: var(--primary);
}

@supports (color: color-mix(in oklab, red, blue)) {
  :root, [data-dark] {
    --primary-hover: color-mix(in oklab, var(--primary) 84%, black);
    --primary-soft: color-mix(in oklab, var(--primary) 9%, white);
    --primary-soft2: color-mix(in oklab, var(--primary) 16%, white);
    --primary-line: color-mix(in oklab, var(--primary) 28%, white);
    --nav-bg: color-mix(in oklab, var(--primary) 96%, black);
    --nav-line: color-mix(in oklab, var(--primary) 72%, black);
    --nav-text: color-mix(in oklab, white 74%, var(--primary));
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
input, select, textarea { font-weight: 400; letter-spacing: 0; font: inherit; color: inherit; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; }
input::placeholder { color: var(--text-3); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 14%, transparent);
}