@import url("fonts.css");

/* JV Pharma — Rep Catalogue design tokens v1.1
   Light theme only. White ground. Every chromatic value is a JV Pharma brand colour.
   Contrast ratios are measured against --surface (#FFFFFF) unless stated. */

:root {
  /* ---- Ground ---- */
  --surface:          #FFFFFF; /* page AND card. A card separates by a hairline, never by tone or shadow */
  --surface-shade:    #F7F7F7; /* sidebar, inset blocks, hovered table row */
  --surface-sunken:   #F0F0F0; /* table headers, the internal price strip, neutral status pills */

  /* ---- Ink ---- */
  --ink:              #1D1D1B; /* brand token. 16.9:1 */
  --ink-secondary:    #4D4C4C; /* brand heading-grey. 8.6:1 */
  --ink-muted:        #6E6E6E; /* 5.2:1 — the lightest any TEXT may be */
  --jv-grey:          #B4B4B4; /* brand token. 2.1:1 — NEVER text. Placeholder art, dots, em-dashes */

  /* ---- Lines ---- */
  --rule:             #E8E8E8; /* hairline between rows, and every card edge */
  --rule-strong:      #D8D8D8; /* section divisions, stronger card edges */
  --field-border:     #8C8C8C; /* inputs, selects, secondary buttons. 3.4:1 */
  --field-disabled:   #C9C9C9; /* always DASHED, so disabled reads at a glance */

  /* ---- jv-navy: the interface colour ---- */
  --navy:             #193964; /* 11.6:1. Primary action, links, selection, customer-view chrome */
  --navy-deep:        #12294A; /* hover / pressed */
  --navy-pressed:     #0E1F3A;

  /* Two tints of jv-navy the artboards use and the token file did not name:
     secondary type on a navy fill, and the cooled card hairline that customer
     view shifts every card to. Both are navy, not a new hue. */
  --on-navy:          #FFFFFF;
  --on-navy-muted:    #BFCDE0; /* 8.0:1 on --navy */
  --rule-cool:        #C9D9E6;

  /* ---- jv-blue: information ---- */
  --blue:             #3FB5E6; /* tag fills ONLY. Text on it is ALWAYS --navy; white is 2.3:1 */
  --blue-wash:        #E4F3FB; /* selected row, bonus + offer chips, info banners */
  --blue-wash-line:   #A6D8F0;

  /* ---- jv-red: the mark, and urgency ---- */
  --red:              #CF363B; /* brand ink, exact. Mark + alert fills with white type (4.9:1) */
  --red-deep:         #A32A2E; /* 7.1:1 — alert TEXT at small sizes */
  --red-deepest:      #8A2326; /* secondary alert text on --red-wash */
  --red-wash:         #F9E3E3; /* every urgency ground */
  --red-wash-line:    #E5A9AB;
  --red-wash-faint:   #FDF2F2; /* expired table row */

  /* ---- Disabled ---- */
  --disabled-bg:      #E6E6E6;
  --disabled-ink:     #8A8A8A;

  /* ---- Focus ---- */
  --focus:            #0B2545; /* 15.5:1 */
  --focus-width:      2.5px;
  --focus-offset:     2px;

  /* ---- Spacing (4-point) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;

  /* ---- Radius ---- */
  --radius-0:  0;    /* table cells, print */
  --radius-sm: 3px;  /* chips, pills, tags */
  --radius-md: 5px;  /* buttons, inputs, cards */
  --radius-lg: 8px;  /* modals, sheets */

  /* ---- Type ---- */
  --font-brand: "Canaro", "Montserrat", "Helvetica Neue", sans-serif;
  --font-text:  "IBM Plex Sans", system-ui, sans-serif;

  /* ---- Motion ---- */
  --t-fast: 120ms; --t-base: 220ms; --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* Every number in the product domain. Non-negotiable. */
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* The single focus treatment. Works on white and on a navy fill alike. */
:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------------------
   Base. Everything below this line is the reset the artboards assume:
   white ground, IBM Plex Sans, Montserrat on .bc, tabular figures on .num.
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute must win. Any element given `display: flex|grid|block`
   by a class would otherwise ignore it, which is a whole family of bugs: a
   hidden sidebar still holding its column, a hidden dialog still on screen. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--navy); }
a:hover { color: var(--navy-deep); }

/* The brand face. Names things; never counts them. */
.bc { font-family: var(--font-brand); }

/* Kept as an alias of .num so markup lifted from the artboards still gets
   tabular figures. Both are the same rule. */
.tn { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* Visually hidden, still read aloud. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}