/* GRAC / Grac-style admin prototype — màu xanh chủ đạo (theo mẫu UI) */
:root {
  /* Brand — green */
  --grac-green-900: #155d37;
  --grac-green-800: #1a6b3f;
  --grac-green-700: #23814d;
  --grac-green-600: #2d9d5c;
  --grac-green-500: #3cb371;
  --grac-green-100: #d4edda;
  --grac-green-50: #e8f5ea;
  --grac-green-25: #f3faf4;

  /* Dùng chung với tên cũ để ít đổi selector */
  --epr-brand-700: var(--grac-green-800);
  --epr-brand-600: var(--grac-green-600);
  --epr-brand-500: var(--grac-green-500);

  --epr-success: var(--grac-green-600);
  --epr-warning: #f2994a;
  --epr-danger: #e53935;
  --epr-info: #1e88e5;

  --epr-neutral-900: #2c3338;
  --epr-neutral-700: #4a5562;
  --epr-neutral-500: #6b7280;
  --epr-neutral-300: #e2e5e9;
  --epr-neutral-100: #f4f6f8;

  --epr-font-size-xs: 0.75rem;
  --epr-font-size-sm: 0.875rem;
  --epr-font-size-md: 1rem;
  --epr-font-weight-semibold: 600;

  --epr-space-1: 0.25rem;
  --epr-space-2: 0.5rem;
  --epr-space-3: 0.75rem;
  --epr-space-4: 1rem;
  --epr-space-5: 1.25rem;
  --epr-space-6: 1.5rem;

  --epr-radius-sm: 0.25rem;
  --epr-radius-md: 0.375rem;
  --epr-radius-pill: 999px;
  --epr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --epr-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);

  --epr-page-bg: #eef1f4;
  --epr-surface: #fff;
  --epr-border: var(--epr-neutral-300);

  --epr-sidebar-width: 280px;
  --epr-sidebar-collapsed: 64px;
  --epr-topbar-height: 56px;

  --epr-sidebar-active-bg: var(--grac-green-50);
  --epr-sidebar-active-border: var(--grac-green-800);

  /* Đường dẫn cây menu (sidebar) — đậm hơn neutral-300 để dễ nhìn */
  --epr-nav-tree-line: rgba(74, 85, 98, 0.55);

  --epr-focus-ring-color: var(--grac-green-600);
  --epr-focus-ring-width: 2px;
  --epr-focus-ring-offset: 2px;

  /* Nhấn UI Blockchain (neo) */
  --epr-blockchain-accent: #4338ca;
  --epr-blockchain-accent-soft: rgba(67, 56, 202, 0.1);

  /* KPI metric cards — bộ 4 màu lặp (professional dashboard) */
  --epr-kpi-1-accent: #1d4ed8;
  --epr-kpi-1-border: rgba(29, 78, 216, 0.16);
  --epr-kpi-2-accent: var(--grac-green-700);
  --epr-kpi-2-border: rgba(21, 93, 55, 0.18);
  --epr-kpi-3-accent: #6d28d9;
  --epr-kpi-3-border: rgba(109, 40, 217, 0.16);
  --epr-kpi-4-accent: #c2410c;
  --epr-kpi-4-border: rgba(194, 65, 12, 0.18);

  --epr-font-sans: "DM Sans", system-ui, sans-serif;
  --epr-font-display: "DM Sans", system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}