/* PRX brand — ONE definition, shared by every module.
 * =====================================================================
 * Milan, 9 Sep 2026: "this is the logo file i want used across all modules
 * and see the website for font/style/view — want this to synch".
 *
 * Taken from the live site (prxpharmacy.co.uk), not invented here:
 *
 *   font          Noto Sans          (--font-geist-sans in the site's CSS)
 *   brand-600     #005eb8            NHS Blue
 *
 * The logo artwork was measured rather than eyeballed: 87,044 pixels of the
 * circle in base_logo_transparent_background.png are #005eb8 exactly, which
 * is the same value the site's stylesheet carries. Artwork and web agree, so
 * this palette is authoritative for the modules too.
 *
 * WHY A SHARED FILE. Before this the four modules used three different font
 * stacks -- home.html hardcoded Inter, Pack and Stock used --font, the DMS
 * used --prx-font -- and none was the site's. Colour was worse: #166534 green
 * 109 times, #1565c0 blue 59, #2563eb 18, #0d9488 teal 8, and the actual brand
 * blue #005eb8 exactly ZERO times. Every one of those was typed into a page by
 * hand, which is how four screens in one product end up looking like four
 * products.
 *
 * HOW TO USE IT. Link this before a page's own <style>, then reach for
 * var(--prx-brand) rather than typing a hex. Do not add a colour here that the
 * website does not have -- the point is that there is one source, and it is
 * not this file.
 */

/* Noto Sans, SELF-HOSTED -- the same font files the website serves.
 *
 * Milan, 10 Sep: "look at the font? none of it is a match". He was right, and
 * my preview was the liar: it stripped the @import when inlining, so the page
 * fell back to the system stack and never showed Noto Sans at all.
 *
 * Fixing that revealed the better answer. These two .woff2 files are lifted
 * from prxpharmacy.co.uk's own bundle, so this is not "Noto Sans from Google
 * that ought to look the same" -- it is byte-for-byte the file the website
 * renders with. Three further reasons to self-host rather than @import:
 *
 *   - no third-party request from a LOGIN page carrying patient-system
 *     referrer data to Google on every load
 *   - no render delay or fallback flash while a CDN answers, and it works if
 *     Google is ever blocked on a shop network
 *   - an @import inside a stylesheet is fetched only AFTER that stylesheet
 *     parses, which is the slowest way to load a font
 *
 * ONE FILE COVERS 400-700. Noto Sans here is a VARIABLE font: the site
 * declares four weights and every one points at the same file. So do not go
 * looking for a bold .woff2 -- there isn't one, and asking for font-weight 700
 * is enough.
 *
 * The unicode-ranges are the site's own, unaltered. latin is 35 KB and covers
 * everything the modules display; latin-ext is 164 KB and exists for accented
 * names, which a patient list genuinely needs -- "Marcella D'Alessandro" and
 * "Oliver De Varennes" are both on today's screens.
 */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400 700;          /* variable: one file, the whole range */
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/noto-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/noto-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ── brand scale, verbatim from the site's stylesheet ──────────────── */
  --prx-brand-50:  #eaf3fb;
  --prx-brand-100: #d2e6f7;
  --prx-brand-200: #a6cdef;
  --prx-brand-400: #3e8fd1;
  --prx-brand-500: #0a6fc2;
  --prx-brand-600: #005eb8;   /* NHS Blue — the logo colour */

  /* The one to use when you just mean "brand". */
  --prx-brand:     var(--prx-brand-600);

  /* ── type ──────────────────────────────────────────────────────────── */
  --prx-font-brand: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* ── the logo, one path, three sizes ───────────────────────────────── */
  --prx-logo:     url('/img/prx-logo-256.png');
  --prx-logo-lg:  url('/img/prx-logo-512.png');
  --prx-logo-sm:  url('/img/prx-logo-128.png');
}

/* The logo as a class, so a module never has to know the path or the aspect
 * ratio. 3125x1875 is 5:3 -- height follows from width, and getting that wrong
 * is how a logo ends up subtly stretched on one screen and not another. */
.prx-logo {
  display: inline-block;
  background: var(--prx-logo) no-repeat center / contain;
  /* Square. The source artwork is 3125x1875 with the circle floating in a
     transparent rectangle -- 45% of that canvas is empty, so sizing by width
     produced a circle two-thirds the size expected and an illegible SYSTEMS
     wordmark. The shipped files are cropped to the ink: 1793x1792, ratio 1.001. */
  aspect-ratio: 1 / 1;
  width: 96px;
}
.prx-logo.sm { width: 64px; }
.prx-logo.lg { width: 160px; background-image: var(--prx-logo-lg); }

/* The artwork has a transparent background, so it sits on any colour. On the
 * brand blue itself it would vanish, so that case gets a white plate rather
 * than a logo nobody can see. */
/* On the brand blue the circle would disappear into the background, so that
   case uses the artwork baked onto white rather than a transparent PNG. */
.prx-logo.on-brand {
  background-image: url('/img/prx-logo-256-white.png');
  border-radius: 50%;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PHASE 2 — THE SEMANTIC PALETTE
 * Milan, 10 Sep 2026: "do phase 2".
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Measured before deciding anything: 326 distinct hex values across the 22
 * live pages, 5,984 uses, and #005eb8 — the logo colour — used ZERO times.
 *
 * BUT the token VOCABULARY was already consistent. --bg, --text, --muted,
 * --blue, --green, --amber, --red, --border appear on 14 to 17 pages each,
 * meaning the same thing every time. Only the VALUES drifted: --blue held
 * three different blues, --bg seven different off-whites. So this is not a new
 * palette imposed on the product — it is one value agreed per name it already
 * uses, which is why each page needs a one-line change rather than a rewrite.
 *
 * TWO OF THE OLD VALUES FAILED WCAG AA AS TEXT, measured on white:
 *
 *     --green  #059669   3.77:1   FAIL      -> #166534   7.13:1
 *     --amber  #d97706   3.19:1   FAIL      -> #b45309   5.02:1
 *
 * Those replacements are not invented. They are --sec-green and --sec-amber,
 * which already exist in this product and were already correct. The safe
 * values were here; they just were not the ones --green and --amber pointed
 * at. Every value below clears 4.5:1 BOTH as text on a white card AND with
 * white text on it, because this product uses each of these colours both ways
 * — a status word and a filled pill. Worst ratio anywhere in the set: 4.51.
 *
 * WHAT IS DELIBERATELY NOT UNIFIED:
 *
 *   - hue MEANING. Amber still means "needs attention", green supplied, red
 *     owed, purple care home / MDS. Collapsing the accidental variety must not
 *     collapse the distinctions somebody reads at a bench.
 *   - --faint (#94a3b8, 2.56:1). It fails as text and stays, because it is
 *     used for placeholders and decorative rules, not for anything that has to
 *     be read. If it ever carries real text, that is the bug, not this value.
 *   - print and label output, again. A cassette sheet goes in a tray.
 *
 * HOW PAGES USE IT: each page's own :root keeps its token names and points
 * them here with the old value as the var() fallback —
 *     --blue: var(--prx-blue, #1d4ed8);
 * so a page that somehow loads without this stylesheet renders exactly as it
 * did, and any single page can be pinned back to its old value by deleting one
 * var() wrapper. */
:root {
  /* ── ground and ink ─────────────────────────────────────────────────── */
  --prx-bg:       #f8fafc;   /* the page behind the cards                  */
  --prx-bg2:      #ffffff;   /* a card                                     */
  --prx-bg3:      #f1f5f9;   /* a sunken well inside a card                */
  --prx-surface:  #ffffff;
  --prx-card:     #ffffff;

  --prx-text:     #0f172a;   /* 17.85:1 — primary                          */
  --prx-text2:    #334155;   /* 10.35:1 — secondary heading                */
  --prx-muted:    #64748b;   /*  4.76:1 on white, 4.55:1 on --prx-bg.
                                 Passes AA, and it is the value 15 of the 17
                                 pages already used. #475569 (7.58:1) is the
                                 option if these screens ever want more
                                 weight — that is a look decision, not a
                                 correctness one, so it is not taken here.  */
  --prx-faint:    #94a3b8;   /* decorative only — see the note above       */

  --prx-border:   #e2e8f0;
  --prx-border2:  #cbd5e1;

  /* ── the accent IS the brand ────────────────────────────────────────────
   * This is the change. --blue was #1d4ed8, #0051d5 or #1565c0 depending on
   * which page you opened, and none of them was the colour of the logo. */
  --prx-blue:     var(--prx-brand-600);   /* #005eb8 — 6.38:1 both ways    */
  --prx-blue-l:   var(--prx-brand-50);    /* #eaf3fb                        */
  --prx-blue-b:   var(--prx-brand-200);   /* #a6cdef                        */
  --prx-accent:   var(--prx-brand-600);
  --prx-accent-l: var(--prx-brand-50);
  --prx-accent-b: var(--prx-brand-200);
  --prx-sec-blue: var(--prx-brand-600);

  /* ── semantic: hue carries meaning, so only the value is unified ────── */
  --prx-green:    #166534;   /* 7.13 — supplied, complete, in stock        */
  --prx-green-l:  #dcfce7;
  --prx-green-b:  #86efac;
  --prx-ok:       #166534;
  --prx-ok-l:     #dcfce7;
  --prx-ok-b:     #86efac;
  --prx-sec-green:#166534;

  --prx-amber:    #b45309;   /* 5.02 — needs attention, no branch, owing   */
  --prx-amber-l:  #fef3c7;
  --prx-amber-b:  #fcd34d;
  --prx-sec-amber:#b45309;

  --prx-red:      #b91c1c;   /* 6.47 — refused, failed, overdue            */
  --prx-red-l:    #fee2e2;
  --prx-red-b:    #fca5a5;
  --prx-sec-red:  #b91c1c;

  --prx-purple:   #6d28d9;   /* 7.10 — care home and MDS routing           */
  --prx-purple-l: #ede9fe;
  --prx-purple-b: #c4b5fd;
}

/* ── the same five colours under other names ───────────────────────────────
 * stock.html and gtin-manager.html call them --warn / --danger / --info
 * rather than --amber / --red / --blue. Same job, different vocabulary, so
 * they are aliased rather than left as a second set of values.
 *
 * Two of those were also failing as text, measured on white:
 *     --warn    #d97706  3.19:1  and  #c97000  4.02:1   -> #b45309  5.02:1
 *     --danger  #e11d48  4.28:1                          -> #b91c1c  6.47:1
 *
 * --info is the one worth naming: it was #0051d5 on stock and #0891b2 on
 * gtin-manager -- a blue on one screen and a CYAN on the other, for the same
 * idea. Both now point at the brand.
 *
 * NOT aliased, deliberately: --teal (#0d9488, one page) and --navy/--navy2/
 * --navy3. Teal is not in the brand and nothing here establishes what it
 * distinguishes on that screen; folding it into blue would collapse a
 * meaning rather than a duplicate. It needs a person who knows the screen. */
:root {
  --prx-warn:     #b45309;
  --prx-warn-l:   #fef3c7;
  --prx-warn-b:   #fcd34d;

  --prx-danger:   #b91c1c;
  --prx-danger-l: #fee2e2;
  --prx-danger-b: #fca5a5;

  --prx-info:     var(--prx-brand-600);
  --prx-info-l:   var(--prx-brand-50);
  --prx-info-b:   var(--prx-brand-200);

  --prx-purple-d: #5b21b6;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PHASE 3 — THE TYPE SCALE
 * Milan, 10 Sep 2026: "do phase 3".
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * 42 distinct pixel sizes across the 22 live pages, 5,580 declarations.
 *
 * THE FIRST THING THE MEASUREMENT DID WAS KILL THE HEADLINE. "47% of type is
 * under 12px" was the phase 2 finding, and read as a legibility scandal. Split
 * print from screen and it is not:
 *
 *     PRINT / LABEL   170 declarations   37 of them under 10px
 *     SCREEN        5,410 declarations  345 of them under 10px
 *
 * The smallest type in the product is .lbl-type, .lbl-ref, .lbl-qr-note,
 * .pharmacy-addr, .signoff-label, .sheet-ref-sub — printed dispensing labels
 * and cassette sheets, where 8px is a physical measurement on a Zebra, not a
 * style choice. Most of the remaining sub-9px turned out to be inline styles
 * inside the label and sheet BUILDERS, which a selector-based check missed
 * entirely. None of that is touched, for the same reason nothing else printed
 * has been: a cassette sheet goes in a tray.
 *
 * THIS SCALE IS DERIVED, NOT INVENTED. Each step is a size the product already
 * leans on, with its real usage count:
 *
 *     10px   902     11px  1135     12px   822     13px   638
 *     14px   277     15px   230     16px   224     20px    95
 *
 * That matters because prx-ui.css already carried a seven-step scale, and it
 * has been referenced ZERO times since it was written. It opened at 11px and
 * had 12.5px as a step — a size that exists 103 times but sits between two
 * far more common ones. A scale nobody can reach for without changing what
 * their screen already looks like does not get adopted, and it did not.
 *
 * 10px IS IN THE SCALE ON PURPOSE. It is the second most-used size in the
 * product (902 uses) and it is what the uppercase micro-captions above KPI
 * numbers are set in. Leaving it out would not make those captions bigger, it
 * would just mean the scale did not describe the product.
 *
 * WHAT IS NOT DECIDED HERE, and is Milan's call rather than mine: whether the
 * shop-floor screens should move OFF 10px and 11px, which between them are
 * 2,037 declarations. Raising them is the single biggest legibility change
 * available — and it directly undoes what he asked for on PRX Pack on 9 Sep,
 * "i need space in the middle screen", where item rows were cut 164px -> 106px
 * so four fit on a phone instead of two and a half. Bigger type means fewer
 * rows. That is a trade between reading a line and seeing the list, it differs
 * per surface, and it is not a sweep.
 */
:root {
  --prx-text-micro: 10px;   /* uppercase captions over a KPI number      */
  --prx-text-xs:    11px;   /* chips, token refs, timestamps             */
  --prx-text-sm:    12px;   /* meta lines, secondary detail              */
  --prx-text-base:  13px;   /* body text, table cells                    */
  --prx-text-md:    14px;   /* drug names, item titles, list rows        */
  --prx-text-lg:    15px;   /* resident and patient names                */
  --prx-text-input: 16px;   /* ANY text input on a touch screen -- below
                               16px iOS zooms the page on focus, which is
                               a layout bug, not a preference             */
  --prx-text-panel: 17px;   /* panel and sheet headings                  */
  --prx-text-xl:    20px;   /* page title                                */
  --prx-text-2xl:   28px;   /* the one number meant to be seen first     */
}