/* All of Context's styles. The older stylesheets sit in the legacy layer with their own resets (no
 * preflight), so the unlayered Tailwind utilities on the rebuilt screens always win over them. */
@import "tailwindcss/theme.css" layer(theme);
@import "./app.css" layer(legacy);
@import "./clinician.css" layer(legacy);
@import "tailwindcss/utilities.css";
@source "./clinician";

@theme {
  --font-sans: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --color-frame: #f4f4f5;
  --color-page: #ffffff;
  --color-ink: #18181b;
  --color-body: #3f3f46;
  --color-cell: #52525b;
  --color-muted: #71717a;
  --color-subtle: #a1a1aa;
  --color-hairline: #f0f0f1;
  --color-line: #e4e4e7;
  --color-line-strong: #d4d4d8;
  --color-quiet: #f4f4f5;
  --color-quiet-hover: #e9e9eb;
  --color-tile: #f9f9fa;
  --color-action: #0c7c5c;
  --color-action-hover: #0a6a4f;
  --color-brand: #2cc295;
  --color-tooltip: #222222;

  /* Clinical tones: a soft fill, a readable text and a stronger icon of the same hue. */
  --color-red-fill: #fdecec;
  --color-red-text: #c42b1c;
  --color-red-icon: #e5383b;
  --color-red-line: #f8c9c5;
  --color-amber-fill: #fef4e2;
  --color-amber-text: #a8590a;
  --color-amber-icon: #f59e0b;
  --color-amber-line: #f7dca8;
  --color-green-fill: #e7f7ee;
  --color-green-text: #0e7a43;
  --color-green-icon: #17a35d;
  --color-blue-fill: #e9f2fe;
  --color-blue-text: #1d5fc4;
  --color-blue-icon: #2f80ed;
  --color-indigo-fill: #efecfe;
  --color-indigo-text: #5536c9;
  --color-indigo-icon: #6d4ee6;
  --color-purple-fill: #f7ebfb;
  --color-purple-text: #9a32ab;
  --color-purple-icon: #b84ccb;
  --color-pink-fill: #fdedf5;
  --color-pink-text: #bb2368;
  --color-pink-icon: #e64593;
  --color-grey-fill: #f1f1f2;
  --color-grey-text: #3f3f46;
  --color-grey-icon: #52525b;
  --color-teal-icon: #0f9f8f;

  --shadow-card: 0 0 0 1px #efeff1;
  --shadow-card-hover: 0 0 0 1px #e4e4e7, 0 10px 24px -14px rgba(24, 24, 27, 0.22);
  --shadow-pop: 0 0 0 1px #ececee, 0 18px 40px -12px rgba(24, 24, 27, 0.22);
  --shadow-chip: 0 1px 2px rgba(24, 24, 27, 0.08), 0 0 0 1px rgba(24, 24, 27, 0.04);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes context-spin {
  to {
    transform: rotate(360deg);
  }
}
@utility animate-spin-slow {
  animation: context-spin 0.9s linear infinite;
}
@keyframes context-tip {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}
@keyframes context-pop {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}
@keyframes context-fade {
  from {
    opacity: 0;
  }
}
@keyframes context-slide {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}
@keyframes context-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}