/**
 * Nimblur / HealthCluster-aligned design tokens for iTrack (MVC reskin).
 * Mirrors icare-widgets src/app/styles/themes/light.css
 */
:root {
  --color-primary: #8500d8;
  --color-primary-rgb: 133, 0, 216;
  --color-accent: #fe458d;
  --color-accent-rgb: 254, 69, 141;
  --color-background: #f9fafb;
  --color-surface: #ffffff;
  --color-surface-muted: #f0f4f8;
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-text-label: #1f2937;
  --color-border: #e5e7eb;
  --color-border-muted: #d1d5db;
  --color-error: #dc2626;
  --color-success: #059669;
  --color-ink: #12101a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 30px 78px rgba(22, 15, 38, 0.34);
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 12px;
  --radius-2xl: 30px;
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /*
   * Font tokens MUST use px, not rem.
   * Bootstrap (Metronic) sets html { font-size: 10px }, so 1rem = 10px.
   * Rem-based tokens were rendering ~62% of intended size (nav ~12px, labels ~10px).
   * Scale: icare-widgets look, slightly larger for ERP readability.
   */
  --font-size-xs: 12px;   /* captions, helper text */
  --font-size-sm: 14px;   /* KPI labels, secondary text */
  --font-size-base: 15px; /* body, inputs, tables, profile role */
  --font-size-nav: 15px;  /* sidebar top-level menu */
  --font-size-subnav: 14px; /* sidebar sub-menu */
  --font-size-md: 15px;   /* header profile name */
  --font-size-lg: 16px;   /* section / panel titles */
  --font-size-xl: 22px;   /* page headings */
  --font-size-2xl: 28px;  /* KPI numbers */
  --gradient-brand: linear-gradient(90deg, var(--color-accent) 0%, var(--color-primary) 100%);
  --gradient-brand-hover: linear-gradient(90deg, #e03d7d 0%, #7200b8 100%);
  --layout-sidebar-width: 252px;
  --layout-sidebar-collapsed-width: 54px;
  --app-header-height: 64px;
  --z-modal-backdrop: 11040;
  --z-modal: 11050;
  --z-swal-overlay: 11100;
  --header-surface: #ffffff;
  --header-border: rgba(133, 0, 216, 0.08);
  --sidebar-surface: rgba(133, 0, 216, 0.04);
  --sidebar-border: rgba(133, 0, 216, 0.12);
}