/* ══════════════════════════════════════════════
   DESIGN TOKENS — Basair MedAxis
══════════════════════════════════════════════ */
:root {
  /* Brand */
  --primary:        #2563EB;
  --primary-50:     #EFF6FF;
  --primary-100:    #DBEAFE;
  --primary-200:    #BFDBFE;
  --primary-600:    #2563EB;
  --primary-700:    #1D4ED8;
  --primary-900:    #1E3A8A;

  /* Semantic */
  --success: #059669; --success-bg: #ECFDF5; --success-border: #6EE7B7;
  --warning: #D97706; --warning-bg: #FFFBEB; --warning-border: #FCD34D;
  --danger:  #DC2626; --danger-bg:  #FEF2F2; --danger-border:  #FCA5A5;
  --info:    #0891B2; --info-bg:    #E0F2FE; --info-border:    #7DD3FC;

  /* Gray scale */
  --gray-50:  #F8FAFC; --gray-100: #F1F5F9; --gray-200: #E2E8F0;
  --gray-300: #CBD5E1; --gray-400: #94A3B8; --gray-500: #64748B;
  --gray-600: #475569; --gray-700: #334155; --gray-800: #1E293B; --gray-900: #0F172A;

  /* Surfaces */
  --bg-app:     #F1F5F9;
  --bg-surface: #FFFFFF;
  --bg-sidebar: #FFFFFF;
  --bg-overlay: rgba(15,23,42,.55);

  /* Text */
  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-muted:     #94A3B8;
  --text-inverse:   #FFFFFF;

  /* Borders */
  --border:           #E2E8F0;
  --border-strong:    #CBD5E1;
  --border-focus:     #2563EB;
  --border-focus-ring:rgba(37,99,235,.18);

  /* Spacing */
  --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; --sp-16:64px;

  /* Radius */
  --radius-xs:4px; --radius-sm:6px; --radius:10px;
  --radius-md:12px; --radius-lg:16px; --radius-xl:20px;
  --radius-2xl:24px; --radius-full:9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.05);
  --shadow:    0 4px 12px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.04);
  --shadow-md: 0 6px 20px rgba(15,23,42,.1), 0 3px 6px rgba(15,23,42,.06);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.12),0 6px 12px rgba(15,23,42,.06);
  --shadow-dialog:0 24px 48px rgba(15,23,42,.18),0 8px 16px rgba(15,23,42,.08);
  --shadow-colored:0 4px 16px rgba(37,99,235,.28);
  --card-shadow:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --card-shadow-hover:0 4px 12px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.04);

  /* Typography */
  --font: 'Cairo', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono','Fira Code',monospace;
  --text-xs:11px; --text-sm:13px; --text-base:15px; --text-md:17px;
  --text-lg:20px; --text-xl:24px; --text-2xl:28px; --text-3xl:34px;
  --weight-normal:400; --weight-medium:500; --weight-semi:600; --weight-bold:700;
  --leading-tight:1.25; --leading-normal:1.5; --leading-relaxed:1.75;

  /* Layout */
  --topbar-height:56px; --bottom-nav-height:64px;
  --sidebar-width:244px; --dialog-max-w:540px;

  /* Z-index */
  --z-base:0; --z-above:10; --z-dropdown:100;
  --z-sticky:150; --z-overlay:200; --z-dialog:300; --z-toast:400; --z-topbar:500;

  /* Transitions */
  --ease:200ms cubic-bezier(.4,0,.2,1);
  --ease-fast:120ms cubic-bezier(.4,0,.2,1);
  --ease-slow:300ms cubic-bezier(.4,0,.2,1);
  --ease-spring:380ms cubic-bezier(.34,1.56,.64,1);

  /* Touch */
  --touch-min:44px; --touch-lg:52px;
}

/* Dark mode */
[data-theme="dark"] {
  --bg-app:     #0F172A;
  --bg-surface: #1E293B;
  --bg-sidebar: #1A2740;
  --bg-overlay: rgba(0,0,0,.7);
  --text-primary:   #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted:     #64748B;
  --border:         #2D3F55;
  --border-strong:  #3B5068;
  --primary-50:  rgba(37,99,235,.12);
  --primary-100: rgba(37,99,235,.2);
  --success-bg:  rgba(5,150,105,.14);
  --warning-bg:  rgba(217,119,6,.14);
  --danger-bg:   rgba(220,38,38,.14);
  --info-bg:     rgba(8,145,178,.14);
  --card-shadow: 0 1px 3px rgba(0,0,0,.25);
  --card-shadow-hover: 0 4px 14px rgba(0,0,0,.35);
  --shadow:      0 4px 12px rgba(0,0,0,.3);
  --shadow-lg:   0 12px 32px rgba(0,0,0,.4);
}
@media (min-width: 768px) {
  :root { --text-base:14px; --text-md:16px; --text-lg:18px; }
}

/* ══ v2.1 additions ══ */
:root {
  --primary-hover: #1D4ED8;
  --badge-notification-bg: #DC2626;
  --anim-bounce: cubic-bezier(.34,1.56,.64,1);
}

/* Stat card hover effect */
.stat-card {
  transition: transform var(--ease), box-shadow var(--ease);
}
.stat-card:active {
  transform: scale(.98);
}

/* Pulse animation for alerts */
@keyframes pulse-ring {
  0%   { transform: scale(.9); opacity:.8; }
  70%  { transform: scale(1.2); opacity:0; }
  100% { transform: scale(1.2); opacity:0; }
}
.pulse {
  animation: pulse-ring 1.8s ease-out infinite;
}

/* Smooth page transitions */
.workspace__inner {
  animation: fadeInUp 200ms cubic-bezier(.4,0,.2,1);
}
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Enhanced toast */
.toast { will-change: transform; }

/* Notification dot */
.notif-dot {
  width: 8px; height: 8px;
  background: var(--danger);
  border-radius: 50%;
  position: absolute;
  top: 4px; left: 4px;
  border: 2px solid var(--bg-surface);
}