/* CalypsoRx — shared tokens */
@font-face { font-family: 'HN'; src: url('fonts/HelveticaNeueLTStd-UltLt.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'HN'; src: url('fonts/HelveticaNeueLTStd-Th.otf')    format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'HN'; src: url('fonts/HelveticaNeueLTStd-Lt.otf')    format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'HN'; src: url('fonts/HelveticaNeueLTStd-Roman.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'HN'; src: url('fonts/HelveticaNeueLTStd-Md.otf')    format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'HN'; src: url('fonts/HelveticaNeueLTStd-Bd.otf')    format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'HN'; src: url('fonts/HelveticaNeueLTStd-Blk.otf')   format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'HNCn'; src: url('fonts/HelveticaNeueLTStd-MdCn.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'HNCn'; src: url('fonts/HelveticaNeueLTStd-BdCn.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --navy:        #1B3A58;
  --navy-700:    #15304A;
  --navy-900:    #0E213A;
  --navy-300:    #4A6A8A;
  --navy-100:    #E5ECF3;
  --navy-050:    #F4F7FA;
  --red:         #C4232A;
  --red-700:     #A41A22;
  --red-100:     #FBE6E7;
  --ink:         #1A1D21;
  --ink-2:       #35363A;
  --ink-3:       #5B6470;
  --ink-4:       #8A93A0;
  --rule:        #E2E6EC;
  --rule-strong: #C9D0DA;
  --bg:          #FFFFFF;
  --bg-soft:     #F7F8FA;
  --bg-muted:    #EEF1F5;
  --success:     #2E7D4F;
  --success-100: #E5F2EB;
  --warning:     #B8860B;
  --warning-100: #FBF2D9;
  --danger:      #C4232A;
  --danger-100:  #FBE6E7;
  --teal:        #0E8A8A;
  --teal-100:    #DEF1F1;
  --violet:      #6B4A98;
  --violet-100:  #ECE6F4;
  /* Lighter and brighter than navy, for work the pharmacy has in hand. */
  --sky:         #0B6BA8;
  --sky-100:     #DDEEF9;
  /* Red-leaning pink: refused, which is not the same as undone. */
  --rose:        #A83262;
  --rose-100:    #FAE4EE;
  --shadow-1: 0 1px 2px rgba(14,33,58,.06), 0 1px 1px rgba(14,33,58,.04);
  --shadow-2: 0 4px 12px rgba(14,33,58,.08), 0 1px 2px rgba(14,33,58,.04);
  --shadow-3: 0 10px 28px rgba(14,33,58,.12), 0 2px 6px rgba(14,33,58,.06);
  --shadow-4: 0 24px 48px rgba(14,33,58,.18);
  --ease-out: cubic-bezier(.2,.7,.25,1);
  --font: 'HN', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-cn: 'HNCn', 'HN', sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  /* Type scale. Seven steps, each named for the job it does — a size with no role is how
     a scale turns back into nineteen hand-tuned numbers. Body is 13px. */
  --text-micro:   10px;  /* only where form carries it: a numeral alone in a badge,
                            or an uppercase column header. Never a sentence. */
  --text-meta:    11px;  /* timestamps, hints, secondary cell text */
  --text-label:   12px;  /* field labels, filter chips, dense secondary rows */
  --text-body:    13px;  /* the base. Body, inputs, buttons, and grid cells by inheritance */
  --text-title:   15px;  /* page and panel titles */
  --text-head:    18px;  /* the heading of a form page */
  --text-display: 22px;  /* a figure meant to be read across the room */
  /* Tracking. At 13px the default spacing runs letters together, so the base is opened a
     little. Caps need more than mixed case to read as words rather than a block — and most
     of this app's catalogue data (drug names, lot descriptions) is stored uppercase. */
  --tracking:      0.025em;
  --tracking-caps: 0.045em;
  /* Spacing. A 2px rhythm inside a component, 4px and up between them. The name is the
     value, so a rule reads without a lookup. Anything not on this list is a clearance
     measured off an overlaid control, and says so where it sits. */
  --sp-2:   2px;   /* stacked lines of one label */
  --sp-4:   4px;   /* label to field, icon to a small label */
  --sp-6:   6px;   /* the common inline gap: icon to text, button to button */
  --sp-8:   8px;   /* the default: field to field, cell padding */
  --sp-10: 10px;
  --sp-12: 12px;   /* group to group inside a panel */
  --sp-14: 14px;
  --sp-16: 16px;   /* panel padding */
  --sp-20: 20px;
  --sp-24: 24px;   /* section to section */
  --sp-32: 32px;
  --sp-48: 48px;   /* the air around an empty state */
  /* Theme. Declared here and nowhere else: every scope that draws with these inherits them,
     including popups portalled to <body> and the legacy pages that sit outside .dirA. */
  --A-bg:          #FBFBFC;
  --A-surface:     #FFFFFF;
  --A-surface-2:   #F4F6F9;
  --A-rule:        #E5E8EE;
  --A-rule-2:      #EEF1F5;
  --A-rule-strong: #C9D0DA;
  --A-fg:          #20262E;
  --A-fg-2:        #4A5360;
  --A-fg-3:        #7A8392;
  --A-fg-4:        #8A93A0;
  --A-accent:      var(--navy);
  --A-accent-2:    var(--navy-700);
  --A-tint:        var(--navy-050);
  --A-radius:      4px;
  --A-radius-md:   6px;
  --A-row-h:       30px;
  --A-cell-pad:    8px;
}

/* Mock data: shared icon helpers */
.lucide-mini { width: 14px; height: 14px; stroke-width: 2; flex: none; }
.lucide-sm   { width: 16px; height: 16px; stroke-width: 2; flex: none; }
.lucide-md   { width: 18px; height: 18px; stroke-width: 2; flex: none; }
.lucide-lg   { width: 20px; height: 20px; stroke-width: 2; flex: none; }