/* The redesign's type (docvoc canvas, Sept 2026): Instrument Sans for the interface, Newsreader for page and dialog headings, JetBrains
   Mono for times, record numbers and counts. Latin subsets from @fontsource, shipped with the app so the desktop works offline. Licence: OFL-1.1 (fonts-OFL.txt). */
@font-face { font-family: 'Instrument Sans'; src: url('/app/dv-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/app/dv-sans-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/app/dv-sans-600.woff2') format('woff2'); font-weight: 550 700; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/app/dv-serif-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/app/dv-serif-500.woff2') format('woff2'); font-weight: 500 600; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/app/dv-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/app/dv-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/app/dv-mono-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  color-scheme: light;
  /* The sign-in brand panel is the same deep navy in both themes (design Auth board). */
  --brand-panel: #141b3d; --brand-panel-ink: #f5f6f9; --brand-panel-sub: #c3c8e0; --brand-panel-muted: #a3a9c8; --brand-panel-line: #2a3160; --brand-panel-icon: #a9b3e6;
  --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --field-label-gap: 8px;
  --text-field-label: 14px;
  --table-row-height: 56px;
  --table-cell-padding-y: 12px;
  --table-cell-padding-x: 20px;
  --text-table-heading: 11px;
  --form-heading-gap: 24px;
  --text-label: 11px;
  --text-meta: 12px;
  --text-secondary: 13px;
  --text-ui: 14px;
  --text-note: 16px;
  --text-patient: 16px;
  --text-card: 17px;
  --text-appbar: 20px;
  --text-phone-heading: 22px;
  --text-clock: 24px;
  --text-settings-heading: 26px;
  --text-recorded-heading: 28px;
  --text-visit-heading: 30px;
  --text-page-heading: 28px;
  --text-phone-clock: 64px;
  /* The design's own names (DESIGN_RULES.md / docvoc-ui.css — the only source of values); every older codebase name below is an alias. */
  --bg: #f5f6f9; --panel: #ffffff; --panel2: #fafbfc; --sidebar: #fafbfc; --line: #dfe3ea; --line2: #eceef3; --table-line: #e6e9f0;
  --ink2: #535c6e; --ink3: #5f6879; --accent-ink: #ffffff; --accent-soft: #e8eaf3; --accent-line: #c9cee3;
  --ok: #1d6b3f; --ok-bg: #e1f1e7; --ok-dot: #267a4b; --ok-line: #6fb28a; --warn: #7a4b12; --warn-bg: #fbf3e6; --warn-line: #e9c88f;
  --danger-line: #efc6bd; --live: #ff5f57; --live-bg: #eceef3; --live-text: #535c6e; --focus: #8d97c4; --scrim: #151a2659;
  --shadow: 0 1px 3px #151a2614; --shadow-card: 0 8px 30px #151a2612; --shadow-hero: 0 8px 22px #1f2a5c40, 0 2px 6px #1f2a5c2b;
  --on-fill: #ffffff; --knob-shadow: 0 1px 2px #151a2633;
  --r-badge: 5px; --r-small: 7px; --r-control: 8px; --r-card: 12px; --r-panel: 14px; --r-pill: 999px;
  --h-row: 30px; --h-compact: 32px; --h-mid: 36px; --h-control: 44px; --h-large: 48px; --h-hero: 56px;
  --accent: #1f2a5c;
  --accent-hover: #151d42;
  --accent-tint: var(--accent-soft);
  --accent-tint-hover: #dde0ec;
  --accent-surface: var(--accent-line);
  --accent-text: #2f3f8f;
  --accent-text-hover: #1f2a5c;
  --accent-strong: #151d42;
  --row-highlight: var(--panel2);
  --level: #8d97c4;
  --recorder: #0f141b;
  --recorder-text: #ced9ec;
  --recorder-muted: #b7c5de;
  --recorder-danger: #ffc0bb;
  --on-accent: var(--accent-ink);
  --on-accent-muted: #e8eaf3;
  --ink: #151a26;
  --body: #2a3140;
  --secondary: var(--ink2);
  --muted: #5a6375;
  --hint: var(--ink3);
  --disabled: #a9b1c0;
  --app-bg: var(--bg);
  --sidebar-bg: #fafbfc; /* = --sidebar; a literal because the shell reuses --sidebar as the menu width on :root */
  --card: var(--panel);
  --popover: var(--card);
  --sunken: var(--bg);
  --input-bg: var(--card);
  --border: var(--line);
  --table-border: var(--table-line);
  --row-border: var(--line2);
  --input-border: #c9cfda;
  --review-bg: var(--warn-bg);
  --review-text: var(--warn);
  --review-dot: #c98a1b;
  --highlight: #f7ead6;
  --highlight-hover: #f1ddbf;
  --highlight-border: var(--warn-line);
  --signed-bg: var(--ok-bg);
  --signed-text: var(--ok);
  --signed-dot: var(--ok-dot);
  --signed-accent: var(--ok-line);
  --recording-bg: var(--live-bg);
  --recording-text: var(--live-text);
  --recording-dot: #667082;
  --danger: #b8321f;
  --danger-fill: var(--danger);
  --danger-bg: #f8e4df;
  --danger-border: var(--danger-line);
  --recording-red: var(--live);
  --on-recording-red: var(--on-accent);
  --focus-outline: var(--focus);
  --focus-ring: #1f2a5c2b;
  --backdrop: var(--scrim);
  --swatch-light: #f5f6f9;
  --swatch-dark: #0f141b;
  --blue: var(--accent);
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-panel: 14px;
  --radius-dialog: 14px;
  --shadow-popover: var(--shadow-card);
  --shadow-primary: 0 4px 10px #1f2a5c1a;
  --shadow-dialog: 0 30px 80px #0a0e1c40;
  --shadow-chip: var(--shadow);
  --weight-brand: 650;
  --weight-heading: 600;
  --weight-control: 550;
  --track-h1: -0.04em;
  --track-h2: -0.026em;
  --ease: cubic-bezier(.2,.7,.2,1);
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --control-height: 44px;
  --control-compact: 32px;
  --control-large: 48px;
  --control-record: 56px;
  --control-line-height: 20px;
  --control-padding-x: 12px;
  --panel-padding: 24px;
  --section-gap: 24px;
  --field-gap: 20px;
  --page-padding-x: 28px;
}
/* Dark theme: theme.js sets data-theme from the saved preference (System follows the OS). Values derive from the
   redesign's dark palette over #0f141b; the navy accent lightens to #a9b3e6 and fills carry dark text (--accent-ink). */
@media not print { :root[data-theme="dark"] {
  color-scheme: dark;
  --brand-panel: #141b3d; --brand-panel-ink: #f5f6f9; --brand-panel-sub: #c3c8e0; --brand-panel-muted: #a3a9c8; --brand-panel-line: #2a3160; --brand-panel-icon: #a9b3e6;
  /* DESIGN_RULES.md / docvoc-ui.css [data-theme="dark"] */
  --bg: #0f141b; --panel: #1a212b; --panel2: #161d26; --sidebar: #151b24; --line: #2a3340; --line2: #232b36; --table-line: #2a3340;
  --ink2: #9aa5b4; --ink3: #97a2b2; --accent-ink: #0b1016; --accent-soft: #1d2440; --accent-line: #2e3766;
  --ok: #7fcb9a; --ok-bg: #16301f; --ok-dot: #5fb585; --ok-line: #4e9a6c; --warn: #e9b872; --warn-bg: #2b2112; --warn-line: #6b5325;
  --danger-line: #6a3329; --live: #e08a6f; --live-bg: #151b24; --live-text: #9aa5b4; --focus: #a9b3e6; --scrim: #0000008c;
  --shadow: 0 1px 3px #0000004d; --shadow-card: 0 8px 30px #00000080; --on-fill: #ffffff; --knob-shadow: 0 1px 2px #00000066;
  --accent: #a9b3e6;
  --accent-hover: #c9d0f2;
  --accent-tint: var(--accent-soft);
  --accent-tint-hover: #242c52;
  --accent-surface: var(--accent-line);
  --accent-text: #a9b3e6;
  --accent-text-hover: #c9d0f2;
  --accent-strong: #c9d0f2;
  --row-highlight: var(--panel2);
  --level: #5d6aa8;
  --recorder: #0b1016;
  --recorder-text: #ced9ec;
  --recorder-muted: #a9b4c7;
  --recorder-danger: #ffc0bb;
  --on-accent: var(--accent-ink);
  --on-accent-muted: #1d2440;
  --ink: #e8ecf1;
  --body: #cdd4de;
  --secondary: var(--ink2);
  --muted: var(--ink3);
  --hint: var(--ink3);
  --disabled: #4a5566;
  --app-bg: var(--bg);
  --sidebar-bg: #151b24; /* = --sidebar (dark); literal for the same reason */
  --card: var(--panel);
  --popover: var(--panel);
  --sunken: var(--panel);
  --input-bg: var(--panel);
  --border: var(--line);
  --table-border: var(--table-line);
  --row-border: var(--line2);
  --input-border: #3a4453;
  --review-bg: var(--warn-bg);
  --review-text: var(--warn);
  --review-dot: #e0a84a;
  --highlight: #3a2a12;
  --highlight-hover: #46341a;
  --highlight-border: var(--warn-line);
  --signed-bg: var(--ok-bg);
  --signed-text: var(--ok);
  --signed-dot: var(--ok-dot);
  --signed-accent: var(--ok-line);
  --recording-bg: var(--live-bg);
  --recording-text: var(--live-text);
  --recording-dot: #8490a1;
  --danger: #f08a76;
  /* The design's own dark .dv-btn--danger-solid is background:var(--danger) with white text (docvoc-ui.css:91); at #efa3a3 that
     fails C-24's 4.5:1 text contrast, so the solid/fill danger button keeps this darker red instead — the deliberate exception
     the gap audit called for (DESIGN_GUIDE.md gap 19: "keep #c2503f if contrast on #efa3a3 is the concern"). */
  --danger-fill: #f08a76;
  --danger-bg: #3a1d18;
  --danger-border: var(--danger-line);
  --recording-red: var(--live);
  --on-recording-red: #0f141b;
  --focus-outline: var(--focus);
  --focus-ring: #a9b3e640;
  /* Dark overlays are a deeper black scrim so dialogs lift off the dark page. */
  --backdrop: #0000008c;
  --swatch-light: #f5f6f9;
  --swatch-dark: #0f141b;
  --shadow-popover: var(--shadow-card);
  --shadow-hero: 0 8px 22px #a9b3e61f, 0 2px 6px #a9b3e614;
  --shadow-primary: 0 4px 14px #a9b3e61f;
  --shadow-dialog: 0 30px 80px #000000a6;
  --shadow-chip: var(--shadow);
} }
/* Printing always uses the light palette; the print styles force black on white. */
@media print { :root { color-scheme: light; } }
@media (max-width: 1250px) { :root { --page-padding-x: 24px; } }
@media (max-width: 760px) {
  :root { --control-height: 44px; --control-compact: 36px; --panel-padding: 20px; --page-padding-x: 20px; }
}