/* ==========================================================================
   style.css - design tokens, reset, typography & standalone app primitives
   Clinical Grade Theme: obsidian navy, sapphire/cyan accents, crisp slate neutrals.
   ========================================================================== */
:root {
  /* Obsidian Navy Palette */
  --navy-950: #06111f;
  --navy-900: #0a1f3d;
  --navy-800: #0e2a52;
  --navy-700: #143a70;
  --navy-600: #1b498b;

  /* Clinical Cyan & Sapphire Accents */
  --blue-700: #0369a1;
  --blue-600: #0284c7;
  --blue-500: #0ea5e9;
  --blue-100: #e0f2fe;
  --blue-50: #f0f9ff;

  /* Neutral Slate Canvas */
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --muted: #475569;
  --muted-light: #64748b;

  /* Restrained Clinical Status Colors */
  --green-700: #047857;
  --green-600: #059669;
  --green-50: #ecfdf5;
  --amber-700: #b45309;
  --amber-600: #d97706;
  --amber-50: #fffbeb;
  --red-700: #b91c1c;
  --red-600: #dc2626;
  --red-50: #fef2f2;

  /* Corner Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 9999px;

  /* Elevation Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 25px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.08);
  --shadow-float: 0 20px 30px -10px rgba(10, 31, 61, 0.22);

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* App Shell Geometry & Safe Area Insets */
  --sidebar-w: 270px;
  --topbar-h: 64px;
  --bottombar-h: 60px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app, .app {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}

/* Custom Sleek Native App Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.75);
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.25;
  color: var(--navy-900);
  font-weight: 650;
  letter-spacing: -0.015em;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 0.75rem; }
a {
  color: var(--blue-600);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--blue-700); text-decoration: underline; }
img, svg { max-width: 100%; display: inline-block; vertical-align: middle; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
ul { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
small, .small { font-size: 0.8125rem; }
.muted { color: var(--muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--navy-900); color: #fff; padding: 10px 16px;
  border-radius: var(--r-sm); font-weight: 600; text-decoration: none;
  box-shadow: var(--shadow-md); transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; color: #fff; outline: none; }
.icon {
  width: 1.2em; height: 1.2em; flex: none; stroke: currentColor; fill: none;
  stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.2em;
}

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