/*
 * ONTOP design tokens — dùng chung cho mọi dự án nhóm on_top.
 * Nguồn: /var/www/on_top/_brand/DESIGN.md. Chép file này vào dự án
 * (ví dụ src/styles/ontop-tokens.css) rồi import trước mọi CSS khác.
 * Mọi màu / cỡ chữ / khoảng cách / bo góc trong UI phải lấy từ đây.
 * Màu lấy từ logo: xanh ONTOP #006EFB (thân chữ), #003BEE (bóng), #08C2FF (sáng),
 * bạc #C9D1DC → #5B6676 (chữ "ON").
 */
:root {
  --hue: 255;

  /* Brand (từ logo) */
  --brand-600: #0047e0; /* hover, chữ trên nền sáng cần tương phản cao */
  --brand-500: #006efb; /* màu chính ONTOP */
  --brand-400: #2f8cff;
  --brand-300: #08c2ff; /* điểm sáng, dùng ít */
  --brand-50: #eef5ff;
  --brand-100: #dbeaff;
  --silver-500: #5b6676;
  --silver-300: #c9d1dc;
  --brand-gradient: linear-gradient(100deg, #003bee 0%, #006efb 55%, #08c2ff 100%);

  /* Neutrals: xám ngả xanh nhẹ theo logo */
  --gray-0: #ffffff;
  --gray-50: #f6f8fc;
  --gray-100: #eef2f8;
  --gray-200: #e1e7f0;
  --gray-300: #cbd3df;
  --gray-400: #98a3b3;
  --gray-500: #6b7686;
  --gray-600: #4f5a6a;
  --gray-700: #3a4453;
  --gray-800: #252d3a;
  --gray-900: #141a24;

  /* Roles — component chỉ dùng các biến này */
  --bg: var(--gray-50);
  --surface: var(--gray-0);
  --surface-sunken: var(--gray-100);
  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --text: var(--gray-900);
  --text-muted: var(--gray-600);
  --text-subtle: var(--gray-500);
  --accent: var(--brand-500);
  --accent-hover: var(--brand-600);
  --accent-soft: var(--brand-50);
  --on-accent: #ffffff;
  --focus-ring: var(--brand-400);
  --success: #0e9f6e;
  --success-soft: #e7f7f0;
  --warning: #d97706;
  --warning-soft: #fff6e5;
  --danger: #e02424;
  --danger-soft: #fdecec;

  /* Chữ: Be Vietnam Pro (đủ dấu tiếng Việt), 1 họ, 3 độ đậm */
  --font-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --text-xs: 0.75rem;    /* 12 nhãn phụ, meta */
  --text-sm: 0.8125rem;  /* 13 ô bảng, chữ phụ */
  --text-base: 0.875rem; /* 14 nội dung chính trong app */
  --text-md: 1rem;       /* 16 input, đoạn đọc */
  --text-lg: 1.125rem;   /* 18 tiêu đề khối */
  --text-xl: 1.375rem;   /* 22 tiêu đề trang */
  --text-2xl: 1.75rem;   /* 28 số liệu lớn, trang trống */
  --text-3xl: 2.25rem;   /* 36 chỉ cho trang công khai / hero */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Khoảng cách 4pt */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;

  /* Bo góc & bóng */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;
  --shadow-card: 0 1px 2px rgb(20 40 90 / 0.05);
  --shadow-overlay: 0 2px 4px rgb(20 40 90 / 0.06), 0 12px 32px rgb(20 40 90 / 0.14);
  --shadow-brand: 0 6px 20px rgb(0 110 251 / 0.28);

  /* Kích thước */
  --control-h-sm: 32px;
  --control-h: 40px;
  --control-h-lg: 48px;
  --sidebar-w: 248px;
  --topbar-h: 60px;
  --content-max: 1600px; /* tận dụng chiều ngang; không bó 1200px */
  --gutter: clamp(16px, 2.5vw, 32px);

  /* Chuyển động: chỉ cho đổi trạng thái */
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 240ms;
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);

  /* Lớp */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;

  /* Breakpoint (tham chiếu, dùng trong @media): 640 / 768 / 1024 / 1280 / 1536 */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}
@media (pointer: coarse) {
  :root { --control-h-sm: 40px; --control-h: 44px; --control-h-lg: 52px; }
}

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--weight-regular) var(--text-base) / var(--leading-normal) var(--font-sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  input, select, textarea { font-size: var(--text-md); } /* chặn iOS tự zoom */
}