/* ==========================================================================
   LĐLĐ Hải Phòng — Design tokens
   NGUỒN SỰ THẬT DUY NHẤT cho màu, font, khoảng cách, bo góc, bóng đổ.
   Mọi file CSS/JS khác chỉ được dùng var(--...), KHÔNG viết mã màu trực tiếp.
   Tài liệu: docs/01-design-system.md
   ========================================================================== */
:root {
  /* ---- Brand ---- */
  --color-primary: #1d4ed8;
  --color-primary-hover: #1e40af;
  --color-primary-active: #1e3a8a;
  --color-primary-soft: #eff6ff;
  --color-primary-soft-2: #dbeafe;
  --color-accent: #dc2626;          /* đỏ cờ — chỉ dùng cho logo/nhấn mạnh nhỏ */
  --color-accent-soft: #fef2f2;
  --color-gold: #f59e0b;            /* ngôi sao trong logo */

  /* ---- Neutral ---- */
  --color-bg: #f5f7fb;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafc;       /* header bảng, vùng phụ */
  --color-surface-hover: #f1f5f9;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-text: #0f172a;
  --color-text-2: #475569;
  --color-text-3: #94a3b8;
  --color-text-inverse: #ffffff;

  /* ---- Sidebar (nền xanh đậm) ---- */
  --sidebar-bg: #0b2a6f;
  --sidebar-bg-hover: rgba(255, 255, 255, 0.08);
  --sidebar-bg-active: rgba(255, 255, 255, 0.14);
  --sidebar-text: #c7d4f0;
  --sidebar-text-active: #ffffff;
  --sidebar-section: #7f93c4;
  --sidebar-border: rgba(255, 255, 255, 0.08);

  /* ---- Semantic ---- */
  --color-success: #16a34a;
  --color-success-soft: #dcfce7;
  --color-success-text: #166534;
  --color-warning: #d97706;
  --color-warning-soft: #fef3c7;
  --color-warning-text: #92400e;
  --color-danger: #dc2626;
  --color-danger-soft: #fee2e2;
  --color-danger-text: #991b1b;
  --color-info: #0284c7;
  --color-info-soft: #e0f2fe;
  --color-info-text: #075985;
  --color-neutral-soft: #f1f5f9;
  --color-neutral-text: #475569;

  /* ---- Chart palette (theo thứ tự dùng) ---- */
  --chart-1: #1d4ed8;
  --chart-2: #0ea5e9;
  --chart-3: #14b8a6;
  --chart-4: #f59e0b;
  --chart-5: #8b5cf6;
  --chart-6: #ef4444;
  --chart-7: #64748b;

  /* ---- Typography ---- */
  --font-sans: "Be Vietnam Pro", "Inter", "Roboto", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Consolas", monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;   /* body mặc định */
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;
  --fs-4xl: 30px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.25;
  --lh-normal: 1.5;

  /* ---- Spacing (lưới 4px) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.16);
  --focus-ring: 0 0 0 3px rgba(29, 78, 216, 0.25);

  /* ---- Layout ---- */
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 64px;
  --content-pad: 24px;
  --overlay: rgba(15, 23, 42, 0.45);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  /* ---- Z-index ---- */
  --z-sticky: 10;
  --z-sidebar: 40;
  --z-topbar: 30;
  --z-dropdown: 50;
  --z-modal: 100;
  --z-toast: 200;
}