/**
 * Design tokens, taken from the approved Phase 1 mock-ups.
 *
 * These are transcribed rather than invented. The visual direction is settled;
 * the open questions in the UI are behavioural, not aesthetic — how the screen
 * shows regulatory state, availability and Section 21 requirements, none of
 * which appear in the mock-ups because none of them existed when those were
 * drawn.
 */

:root {
  /* ---- Brand -------------------------------------------------------------
     Navy carries the chrome, gold carries exactly one thing per screen: the
     action that moves the order forward. If gold appears twice on a screen,
     one of them is wrong. */
  --navy-900: #0a1f38;
  --navy-800: #0f2a47;
  --navy-700: #16385c;
  --navy-100: #e8edf3;
  --gold-600: #b8860b;
  --gold-500: #c9971c;
  --gold-100: #f7edd6;

  /* ---- Neutrals ---------------------------------------------------------- */
  --ink-900: #10192b;
  --ink-700: #33415c;
  --ink-500: #5c6b85;
  --ink-300: #97a3b6;
  --line: #dde4eb;
  --line-strong: #c8d2dc;
  --surface: #ffffff;
  --surface-sunken: #f6f8fa;
  --surface-raised: #ffffff;

  /* ---- Status -----------------------------------------------------------
     Four states only. A palette with eight status colours teaches nobody
     anything; these map to the four things a physician can act on. */
  --ok-600: #157347;
  --ok-100: #e3f3ea;
  --warn-600: #a86500;
  --warn-100: #fdf0dc;
  --stop-600: #b42318;
  --stop-100: #fde8e6;
  --info-600: #1e5fa8;
  --info-100: #e6effa;

  /* ---- Type -------------------------------------------------------------
     One family. This is a procurement tool used at speed, often on a clinic
     desktop; a display face would be decoration. Tabular numerals are the one
     typographic decision that matters, because the whole screen is a column of
     prices that must align. */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "SF Mono", "Roboto Mono", ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;

  /* ---- Space ------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --shadow-card: 0 1px 2px rgba(16, 25, 43, 0.06), 0 1px 3px rgba(16, 25, 43, 0.04);
  --shadow-panel: 0 4px 16px rgba(16, 25, 43, 0.08);

  --sidebar-width: 232px;
  --summary-width: 340px;
}

/* Every price, quantity and total is lining and tabular. A column of prices
   that does not align is harder to scan than one that does, and this screen is
   almost entirely such a column. */
.num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--ink-900);
  background: var(--surface-sunken);
  -webkit-font-smoothing: antialiased;
}

/* Focus is never removed, only restyled. This screen is designed to be driven
   from the keyboard — see the Quick Order component — so a physician tabbing
   through forty quantity fields must always know where they are. */
:focus-visible {
  outline: 2px solid var(--info-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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