/* Novis EMR — UI tokens and base components (v0.1)
   One file is the source of truth for the product: every screen reads these tokens, never raw values.
   Light is the default; dark applies only when <html data-theme="dark"> is set by the user's toggle. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=Jost:wght@400..600&family=Fraunces:opsz,wght@9..144,400..600&display=swap");

:root {
  /* Surfaces: warm paper, layered */
  --n-canvas: #f4f0e7;        /* app background behind panels */
  --n-paper: #fdfbf7;         /* panels, cards, tiles */
  --n-raised: #ffffff;        /* inputs, popovers, the active row */
  --n-well: rgba(21, 36, 71, 0.04);   /* icon wells, inner cards, read-only fields */
  --n-nav: #152447;           /* left navigation */
  --n-nav-ink: #c3cedc;
  --n-nav-active: rgba(221, 170, 60, 0.16);

  /* Ink */
  --n-ink: #152447;           /* headings, key values, names */
  --n-text: #26323f;          /* body text */
  --n-muted: #5f6b78;         /* secondary lines, captions */
  --n-faint: #8a94a0;         /* placeholders, disabled only */
  --n-line: rgba(21, 36, 71, 0.09);
  --n-line-strong: rgba(21, 36, 71, 0.16);
  --n-track: rgba(21, 36, 71, 0.08);

  /* Action: the one accent for "do this" */
  --n-action: #106793;
  --n-action-hover: #0c5679;
  --n-action-press: #0a4865;
  --n-action-soft: #e6f1f6;
  --n-action-text: #0d5a80;
  --n-on-action: #ffffff;   /* text on action and AI buttons */

  /* AI: anything a model wrote or is writing */
  --n-ai: #4652d6;
  --n-ai-soft: #eeefff;
  --n-ai-line: rgba(70, 82, 214, 0.38);
  --n-ai-text: #3a44b8;

  /* Brand: logo, the selected nav item, marketing. Not for status. */
  --n-gold: #ddaa3c;
  --n-gold-text: #8a6518;
  --n-gold-soft: #fbf1d9;

  /* Clinical status: always paired with a word or icon, never colour alone */
  --n-ok: #2f7d5b;       --n-ok-soft: #e4f2eb;
  --n-warn: #a8670f;     --n-warn-soft: #fbf0dc;
  --n-crit: #b42318;     --n-crit-soft: #fde8e6;
  --n-info: #106793;     --n-info-soft: #e6f1f6;
  --n-neutral: #5f6b78;  --n-neutral-soft: #eef0f2;

  /* Charts (validated with the dataviz palette checks, light on --n-paper) */
  --n-chart-series: #106793;   /* the plotted result */
  --n-chart-flag: #a8670f;     /* points outside the normal range (always with an H/L label) */
  --n-chart-band: rgba(47, 125, 91, 0.10); /* normal-range band */

  /* Type */
  --n-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --n-font-brand: "Jost", ui-sans-serif, system-ui, sans-serif;
  --n-font-display: "Fraunces", Georgia, serif;
  --n-text-xs: 12px;   --n-lh-xs: 16px;   /* captions, table heads */
  --n-text-sm: 13px;   --n-lh-sm: 18px;   /* secondary lines */
  --n-text-base: 14px; --n-lh-base: 20px; /* body, inputs, table cells */
  --n-text-md: 16px;   --n-lh-md: 24px;   /* panel titles, patient-facing text */
  --n-text-lg: 20px;   --n-lh-lg: 28px;   /* page titles, patient name in lists */
  --n-text-xl: 24px;   --n-lh-xl: 32px;   /* patient name in banner, vitals values */
  --n-text-2xl: 36px;  --n-lh-2xl: 40px;  /* dashboard numbers */
  --n-eyebrow: 600 11px/1 var(--n-font-brand); /* "BEFORE YOU SIGN" */
  --n-eyebrow-tracking: 0.14em;

  /* Space: 4 px base */
  --n-1: 4px; --n-2: 8px; --n-3: 12px; --n-4: 16px; --n-5: 20px; --n-6: 24px; --n-8: 32px; --n-10: 40px; --n-12: 48px;

  /* Shape */
  --n-r-sm: 8px;    /* buttons, inputs, chips */
  --n-r-md: 12px;   /* inner cards, wells, list rows */
  --n-r-lg: 18px;   /* panels */
  --n-r-xl: 24px;   /* dashboard tiles */
  --n-r-pill: 999px;
  --n-shadow-panel: 0 0 0 1px rgba(21, 36, 71, 0.06), inset 0 1px 0 #fff, 0 20px 40px -28px rgba(21, 36, 71, 0.28),
    0 1px 2px rgba(21, 36, 71, 0.04);
  --n-shadow-pop: 0 0 0 1px rgba(21, 36, 71, 0.08), 0 18px 48px -12px rgba(21, 36, 71, 0.3);
  --n-focus: 0 0 0 2px var(--n-paper), 0 0 0 4px var(--n-action);

  /* Sizes */
  --n-control: 36px;      /* desktop controls */
  --n-control-lg: 44px;   /* touch and kiosk */
  --n-nav-w: 232px;
  --n-rail-w: 320px;      /* the right-hand context rail */
  --n-step-w: 248px;      /* the left-hand section/progress column */

  /* Motion */
  --n-ease-out: cubic-bezier(0.33, 1, 0.68, 1);      /* enter, count-up */
  --n-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* move, resize, roll */
  --n-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);  /* bars and toggles only */
  --n-dur-press: 120ms;
  --n-dur-state: 200ms;
  --n-dur-enter: 320ms;
  --n-dur-panel: 480ms;
  --n-dur-tile: 650ms;
  --n-stagger: 80ms;
  --n-rise: 8px;
}

:root[data-theme="dark"] {
  --n-canvas: #0b1626;
  --n-paper: #111f33;
  --n-raised: #16273f;
  --n-well: rgba(255, 255, 255, 0.05);
  --n-nav: #08111e;
  --n-ink: #f1ece2;
  --n-text: #d9e0e8;
  --n-muted: #9aa9b8;
  --n-faint: #6c7a8a;
  --n-line: rgba(255, 255, 255, 0.08);
  --n-line-strong: rgba(255, 255, 255, 0.16);
  --n-track: rgba(255, 255, 255, 0.08);
  --n-action: #3b9cc8;
  --n-action-hover: #52acd4;
  --n-action-press: #2d86b0;
  --n-action-soft: rgba(59, 156, 200, 0.16);
  --n-action-text: #7cc3e2;
  --n-on-action: #06121f;
  --n-ai: #8b93f0;
  --n-ai-soft: rgba(139, 147, 240, 0.14);
  --n-ai-line: rgba(139, 147, 240, 0.45);
  --n-ai-text: #aab0f5;
  --n-gold-text: #e2b450;
  --n-gold-soft: rgba(221, 170, 60, 0.14);
  --n-ok: #5cc095;      --n-ok-soft: rgba(92, 192, 149, 0.14);
  --n-warn: #e3a54a;    --n-warn-soft: rgba(227, 165, 74, 0.14);
  --n-crit: #f2766b;    --n-crit-soft: rgba(242, 118, 107, 0.14);
  --n-info: #7cc3e2;    --n-info-soft: rgba(124, 195, 226, 0.14);
  --n-neutral: #9aa9b8; --n-neutral-soft: rgba(154, 169, 184, 0.14);
  --n-chart-series: #3b9cc8;
  --n-chart-flag: #c2842b;     /* deeper than --n-warn so it stays inside the dark-mode lightness band */
  --n-chart-band: rgba(92, 192, 149, 0.12);
  --n-shadow-panel: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 20px 40px -24px rgba(0, 0, 0, 0.6);
  --n-shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 48px -12px rgba(0, 0, 0, 0.7);
}

/* ---------- Base components ---------- */

.n-panel {
  background: var(--n-paper);
  border-radius: var(--n-r-lg);
  box-shadow: var(--n-shadow-panel);
  padding: var(--n-5);
}
.n-panel-title { font: 600 var(--n-text-md) / var(--n-lh-md) var(--n-font); color: var(--n-ink); margin: 0; }
.n-panel-sub { font: 400 var(--n-text-sm) / var(--n-lh-sm) var(--n-font); color: var(--n-muted); margin: 2px 0 0; }
.n-eyebrow {
  font: var(--n-eyebrow);
  letter-spacing: var(--n-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--n-muted);
}

/* Buttons */
.n-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--n-2);
  height: var(--n-control); padding: 0 var(--n-4);
  border-radius: var(--n-r-sm); border: 1px solid transparent;
  font: 600 var(--n-text-base) / 1 var(--n-font); white-space: nowrap; cursor: pointer;
  transition: background var(--n-dur-state) var(--n-ease-out), transform var(--n-dur-press) var(--n-ease-out),
    box-shadow var(--n-dur-state) var(--n-ease-out);
}
.n-btn:active { transform: scale(0.97); }
.n-btn:focus-visible { outline: none; box-shadow: var(--n-focus); }
.n-btn svg { width: 16px; height: 16px; flex: none; }
.n-btn-primary { background: var(--n-action); color: var(--n-on-action); }
.n-btn-primary:hover { background: var(--n-action-hover); }
.n-btn-secondary { background: var(--n-raised); color: var(--n-ink); border-color: var(--n-line-strong); }
.n-btn-secondary:hover { background: var(--n-well); }
.n-btn-ghost { background: transparent; color: var(--n-text); }
.n-btn-ghost:hover { background: var(--n-well); }
.n-btn-ai { background: var(--n-ai); color: var(--n-on-action); }
.n-btn-ai:hover { filter: brightness(1.08); }
.n-btn-danger { background: var(--n-raised); color: var(--n-crit); border-color: color-mix(in srgb, var(--n-crit) 35%, transparent); }
.n-btn[disabled], .n-btn[aria-disabled="true"] { background: var(--n-well); color: var(--n-faint); border-color: transparent; cursor: not-allowed; transform: none; }
.n-btn-lg { height: var(--n-control-lg); padding: 0 var(--n-5); font-size: var(--n-text-md); }

/* Fields */
.n-field { display: grid; gap: 6px; }
.n-label { font: 500 var(--n-text-sm) / var(--n-lh-sm) var(--n-font); color: var(--n-text); }
.n-input {
  height: var(--n-control); padding: 0 var(--n-3); width: 100%;
  background: var(--n-raised); color: var(--n-ink);
  border: 1px solid var(--n-line-strong); border-radius: var(--n-r-sm);
  font: 400 var(--n-text-base) / 1 var(--n-font);
}
.n-input::placeholder { color: var(--n-faint); }
.n-input:focus { outline: none; border-color: var(--n-action); box-shadow: 0 0 0 3px var(--n-action-soft); }
.n-input[aria-invalid="true"] { border-color: var(--n-crit); box-shadow: 0 0 0 3px var(--n-crit-soft); }
.n-help { font: 400 var(--n-text-xs) / var(--n-lh-xs) var(--n-font); color: var(--n-muted); }

/* Status pill: dot + word */
.n-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: var(--n-r-pill);
  font: 600 var(--n-text-xs) / 1 var(--n-font); white-space: nowrap;
}
.n-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.n-pill-ok { background: var(--n-ok-soft); color: var(--n-ok); }
.n-pill-warn { background: var(--n-warn-soft); color: var(--n-warn); }
.n-pill-crit { background: var(--n-crit-soft); color: var(--n-crit); }
.n-pill-info { background: var(--n-info-soft); color: var(--n-info); }
.n-pill-neutral { background: var(--n-neutral-soft); color: var(--n-neutral); }
.n-pill-ai { background: var(--n-ai-soft); color: var(--n-ai-text); }

/* Chips: removable or selectable values (diagnoses, symptoms) */
.n-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border-radius: var(--n-r-sm); background: var(--n-well); color: var(--n-text);
  font: 500 var(--n-text-sm) / 1 var(--n-font);
}
.n-chip code { font: 600 var(--n-text-xs) / 1 var(--n-font); letter-spacing: 0.02em; color: var(--n-action-text); }

/* Segmented control */
.n-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--n-well); }
.n-seg button {
  height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  font: 500 var(--n-text-sm) / 1 var(--n-font); color: var(--n-muted);
}
.n-seg button[aria-pressed="true"] { background: var(--n-raised); color: var(--n-ink); box-shadow: 0 1px 2px rgba(21, 36, 71, 0.1); }

/* Switch */
.n-switch { position: relative; width: 40px; height: 24px; border-radius: var(--n-r-pill); background: var(--n-line-strong); border: 0; cursor: pointer; flex: none; transition: background var(--n-dur-state) var(--n-ease-out); }
.n-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform var(--n-dur-enter) var(--n-ease-back); }
.n-switch[aria-checked="true"] { background: var(--n-action); }
.n-switch[aria-checked="true"]::after { transform: translateX(16px); }
.n-switch:focus-visible { outline: none; box-shadow: var(--n-focus); }

/* Keyboard hint */
.n-kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 6px; background: var(--n-raised); box-shadow: inset 0 0 0 1px var(--n-line-strong);
  font: 500 11px / 1 var(--n-font); color: var(--n-muted);
}

/* Check row: a safety check or a "before you sign" item */
.n-check { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--n-3); align-items: start; padding: var(--n-2) 0; }
.n-check-icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.n-check-icon svg { width: 16px; height: 16px; }
.n-check-ok .n-check-icon { background: var(--n-ok-soft); color: var(--n-ok); }
.n-check-warn .n-check-icon { background: var(--n-warn-soft); color: var(--n-warn); }
.n-check-crit .n-check-icon { background: var(--n-crit-soft); color: var(--n-crit); }
.n-check-title { font: 600 var(--n-text-base) / var(--n-lh-base) var(--n-font); color: var(--n-ink); }
.n-check-detail { font: 400 var(--n-text-sm) / var(--n-lh-sm) var(--n-font); color: var(--n-muted); }

/* Table */
.n-table { width: 100%; border-collapse: collapse; font: 400 var(--n-text-base) / var(--n-lh-base) var(--n-font); font-variant-numeric: tabular-nums; }
.n-table th { text-align: left; font: 600 var(--n-text-xs) / var(--n-lh-xs) var(--n-font); letter-spacing: 0.04em; text-transform: uppercase; color: var(--n-muted); padding: 10px 12px; border-bottom: 1px solid var(--n-line); }
.n-table td { padding: 12px; border-bottom: 1px solid var(--n-line); color: var(--n-text); vertical-align: middle; }
.n-table tr:hover td { background: var(--n-well); }
.n-table td.n-strong { color: var(--n-ink); font-weight: 500; }

/* Skeleton */
.n-skel { height: 10px; border-radius: var(--n-r-pill); background: linear-gradient(90deg, var(--n-track) 0%, var(--n-line-strong) 50%, var(--n-track) 100%); background-size: 200% 100%; animation: n-shimmer 1.6s linear infinite; }
@keyframes n-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .n-btn, .n-switch, .n-switch::after { transition: none; }
  .n-btn:active { transform: none; }
  .n-skel { animation: none; }
}