/* Direction: clinical dispensary — cool pharmacy-white, pine green, a geometric grotesk */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f3f7f5;
  --surface: #ffffff;
  --surface-2: #e7ebe9;
  --border: #d1d7d4;
  --border-strong: #abb1af;
  --ink: #11251f;
  --muted: #5a6663;
  --accent: #0e6a56;
  --accent-hover: #0c5a49;
  --accent-ink: #ffffff;
  --accent-text: #0a5546;
  --accent-strong: #0e6a56;
  --accent-soft: #d3e3df;
  --accent-border: #8cb8ad;
  --success: #12794f;
  --success-ink: #ffffff;
  --success-soft: #d8e8e1;
  --success-strong: #116f49;
  --warning: #9a5b00;
  --warning-ink: #ffffff;
  --warning-soft: #e8e4d8;
  --warning-strong: #8e5400;
  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #ebdedb;
  --danger-strong: #b3261e;
  --chart-1: #0e6a56;
  --chart-2: #157eaa;
  --chart-3: #523b8c;
  --chart-4: #a64a75;
  --chart-5: #763a09;
  --chart-6: #72780a;

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius-card: 14px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --font-sans: "Inter", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #020f0c;
  --surface: #1b2724;
  --surface-2: #0f1b18;
  --border: #25312e;
  --border-strong: #4e5755;
  --ink: #f3f7f5;
  --muted: #939a98;
  --accent: #0e6a56;
  --accent-hover: #32806f;
  --accent-ink: #ffffff;
  --accent-text: #609d90;
  --accent-strong: #529486;
  --accent-soft: #05231c;
  --accent-border: #07382d;
  --success: #12794f;
  --success-ink: #ffffff;
  --success-soft: #06261b;
  --success-strong: #469776;
  --warning: #9a5b00;
  --warning-ink: #ffffff;
  --warning-soft: #232009;
  --warning-strong: #b07f38;
  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #291410;
  --danger-strong: #c9645e;
  --chart-1: #287c67;
  --chart-2: #2091c2;
  --chart-3: #846fc6;
  --chart-4: #ba5c87;
  --chart-5: #bb672a;
  --chart-6: #848b15;
}

.tag { display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px; padding: .125rem .6rem; font-size: .75rem; font-weight: 600; white-space: nowrap; color: var(--muted); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.tag-ok { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
.tag-warn { color: var(--warning); background: color-mix(in srgb, var(--warning) 16%, transparent); }
.tag-bad { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent); }
.tbl { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tbl th { text-align: left; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: .65rem .85rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: .7rem .85rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: .85em; }
.kpi-bar { transform-origin: bottom; animation: barrise .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes barrise { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
.tile { transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.tile:hover { border-color: var(--accent); box-shadow: 0 6px 18px -10px var(--accent); }
.tile:active { transform: scale(.98); }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.scan-flash { animation: scanflash .6s ease; }
@keyframes scanflash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.receipt { font-family: var(--font-mono); }
@media print {
  .no-print { display: none !important; }
  .receipt-wrap { box-shadow: none !important; border: 0 !important; }
}
@media (prefers-reduced-motion: reduce) { .scan-flash, .kpi-bar { animation: none; } }
html.reduced-motion .scan-flash, html.reduced-motion .kpi-bar { animation: none; }