/**
 * @module dashboard-base
 * @description CSS custom properties (design tokens), box-sizing reset, and base body styles
 * shared across all dashboard components. Clinical, modern palette.
 */

@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@800,700,500,400,300&display=swap');

/* ── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #EBF7FC;
  --white:        #FFFFFF;
  --bg-card:      #FFFFFF;
  --bg-hover:     #F1F5F9;
  --border:       #E2E8F0;
  --shadow-card:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --primary:      #0891B2;
  --primary-lt:   #0EA5E9;
  --primary-dim:  #0E7490;
  --teal:         #0891B2;
  --teal-lt:      #0EA5E9;
  --teal-dim:     #0E7490;
  --red:          #EF4444;
  --amber:        #F59E0B;
  --green:        #22C55E;
  --text:         #0F172A;
  --text-muted:   #94A3B8;
  --radius:       10px;
}

body {
  font-family: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}