/* ==========================================================================
   THEME 3: PRECISION PHARMA HUB DESIGN SYSTEM TOKENS
   Phong cách: Precision Pharma Hub (Corporate Emerald & High-Contrast Utility)
   Đặc trưng: Xanh ngọc dược phẩm, độ tương phản cao cho TDV thị trường, viền rõ nét
   ========================================================================== */

:root {
  /* LIGHT MODE */
  --primary: #059669;
  --primary-hover: #047857;
  --primary-active: #065f46;
  --primary-light: #d1fae5;
  --primary-text: #ffffff;

  --secondary: #1d4ed8;
  --secondary-hover: #1e40af;
  --secondary-text: #ffffff;

  --accent: #ea580c;
  --accent-light: #ffedd5;
  --accent-glow: rgba(5, 150, 105, 0.2);

  /* Nền và Bề mặt */
  --bg-app: #f4f6f8;
  --bg-surface: #ffffff;
  --bg-surface-alt: #e9ecef;
  --bg-surface-elevated: #ffffff;

  /* Đường viền dứt khoát */
  --border-subtle: #cbd5e1;
  --border-medium: #94a3b8;
  --border-strong: #64748b;

  /* Typography Colors */
  --text-main: #0f172a;
  --text-muted: #334155;
  --text-subtle: #64748b;
  --text-inverse: #ffffff;

  /* Trạng thái */
  --success: #059669;
  --success-bg: #d1fae5;
  --success-text: #064e3b;

  --warning: #d97706;
  --warning-bg: #fef3c7;
  --warning-text: #78350f;

  --danger: #dc2626;
  --danger-bg: #fee2e2;
  --danger-text: #7f1d1d;

  --info: #0284c7;
  --info-bg: #e0f2fe;
  --info-text: #0c4a6e;

  /* Typography */
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Shadows (Sắc nét) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 12px 18px rgba(0, 0, 0, 0.12);
  --shadow-drawer: -4px 0 20px rgba(0, 0, 0, 0.15);

  /* Bo góc (Gọn gàng, chuẩn Utility) */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  /* Kích thước */
  --header-height: 62px;
  --sidebar-width: 265px;
  --sidebar-collapsed-width: 72px;

  /* Sidebar Deep Forest Emerald */
  --sidebar-bg: #064e3b;
  --sidebar-text: #f8fafc;
  --sidebar-text-muted: #a7f3d0;
  --sidebar-hover: rgba(255, 255, 255, 0.08);
  --sidebar-active-bg: #10b981;
  --sidebar-active-text: #022c22;
  --sidebar-border: #042f2e;
}

/* ==========================================================================
   DARK MODE (HIGH CONTRAST EMERALD CHARCOAL)
   ========================================================================== */
[data-mode="dark"] {
  --primary: #10b981;
  --primary-hover: #34d399;
  --primary-active: #6ee7b7;
  --primary-light: #064e3b;
  --primary-text: #022c22;

  --secondary: #60a5fa;
  --secondary-hover: #93c5fd;
  --secondary-text: #081110;

  --accent: #fb923c;
  --accent-light: #7c2d12;
  --accent-glow: rgba(16, 185, 129, 0.3);

  --bg-app: #081110;
  --bg-surface: #0f1f1d;
  --bg-surface-alt: #162c29;
  --bg-surface-elevated: #1a3531;

  --border-subtle: #1f3d39;
  --border-medium: #2e5954;
  --border-strong: #427c75;

  --text-main: #f8fafc;
  --text-muted: #cbd5e1;
  --text-subtle: #94a3b8;
  --text-inverse: #081110;

  --success: #34d399;
  --success-bg: rgba(16, 185, 129, 0.2);
  --success-text: #a7f3d0;

  --warning: #fbbf24;
  --warning-bg: rgba(217, 119, 6, 0.2);
  --warning-text: #fde68a;

  --danger: #f87171;
  --danger-bg: rgba(220, 38, 38, 0.2);
  --danger-text: #fecaca;

  --info: #38bdf8;
  --info-bg: rgba(2, 132, 199, 0.2);
  --info-text: #bae6fd;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 12px 18px rgba(0, 0, 0, 0.7);
  --shadow-drawer: -4px 0 20px rgba(0, 0, 0, 0.85);

  --sidebar-bg: #041a15;
  --sidebar-border: #0b332b;
}