/* GENERATED by scripts/build-tokens.mjs from spec/registries/design-tokens.json.
 *
 * Do not hand-edit — the tokens-fresh gate regenerates and diffs, so an edit
 * here fails the build with a pointer back to the registry.
 *
 * The direction is quiet authority. PackAuth is sold to QA managers, regulatory consultants and export managers, so the page has to be comfortable to read for a long time rather than striking for a moment: a near-white ground, one sans throughout, a deep ink-blue for action and a cocoa accent carried over from the pack artwork. A warm-paper-and-serif treatment was built, reviewed and rejected — it read as cream and was harder on the eyes.
 */

@font-face {
  font-family: "InterVariable";
  /* Body, UI, everything that is not a display heading. */
  src: url("/assets/fonts/inter.woff2") format("woff2-variations"),
       url("/assets/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "JetBrainsMonoVariable";
  /* Rule ids, pack ids, hashes, ordinals — every value a reader might copy. */
  src: url("/assets/fonts/mono.woff2") format("woff2-variations"),
       url("/assets/fonts/mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
  font-style: normal;
}

:root {
  color-scheme: light;

  /* Typefaces — self-hosted, SIL Open Font License 1.1. */
  --font-text: "InterVariable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-text);  /* h1 and section h2. Set in the text face at display weight and tight tracking — the serif was tried and rejected as harder on the eyes. */
  --font-mono: "JetBrainsMonoVariable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Surfaces and ink */
  --paper:         #fcfcfd;  /* The page. A near-white with a trace of cool in it — enough to stop the flat, unstyled look of pure #ffffff, not so warm that it reads as cream. */
  --surface:       #ffffff;  /* Cards and panels, lifted off the paper by being the one true white on the page. */
  --surface-sunk:  #f2f4f7;  /* Recessed areas: strips, table headers, chrome. */
  --ink:           #101418;  /* Primary text. */
  --ink-2:         #414a55;  /* Body prose. */
  --ink-3:         #616b78;  /* Meta, captions, labels. */
  --line:          #e3e7ec;  /* Hairline separators. */
  --line-2:        #c4cbd4;  /* Borders that must be seen. */
  --accent:        #1a4f8a;  /* Action. A deep authority blue, deliberately not the default link blue. */
  --accent-2:      #2f74b8;  /* Hover and gradient stop. */
  --accent-ink:    #ffffff;  /* Text on accent. */
  --warm:          #8a4b1e;  /* Editorial accent — eyebrows, rules, display flourishes. Taken from the pack artwork. */
  --warm-2:        #b8703a;  /* Warm hover and gradient stop. */
  --ok:            #1a6b46;  /* Release permitted. */
  --ok-bg:         #e6f2ea;  /* Release permitted, filled. */
  --block:         #a52218;  /* Blocks a release. */
  --block-bg:      #fbeae7;  /* Blocks a release, filled. */
  --warn:          #8a5a0c;  /* Raises a finding without blocking. */
  --warn-bg:       #fbf1de;  /* Warning, filled. */
  --on-accent:     #ffffff;  /* Text and strokes on any saturated fill — pin markers, chips, the pack brand line. */
  --pack-face:     #fbf7ef;  /* The drawn pack's board stock. Warmer and lighter than the page paper, so the artwork reads as an object ON the page rather than a hole in it. */
  --pack-band:     #6b3f1d;  /* The drawn pack's printed band. This cocoa is where the --warm editorial accent came from. */
  --pack-name:     #f4e6d2;  /* The pack's sub-brand line, reversed out of the band. */
  --pack-txt:      #4a4038;  /* Small print on the drawn pack. */
  --pack-ink:      #2f2721;  /* Headings and barcode bars on the drawn pack. */
  --pack-badge:    #1f7a4d;  /* The VEGAN claim badge on the drawn pack. */

  /* Elevation */
  --shadow-sm:  0 1px 2px rgb(28 22 14 / 5%), 0 2px 6px rgb(28 22 14 / 4%);  /* Resting card. */
  --shadow-md:  0 2px 4px rgb(28 22 14 / 6%), 0 12px 28px rgb(28 22 14 / 8%);  /* Raised card, hover. */
  --shadow-lg:  0 4px 10px rgb(28 22 14 / 8%), 0 28px 64px rgb(28 22 14 / 14%);  /* Mockups and figures — the things meant to feel like objects. */

  /* Radius */
  --radius-sm:  6px;  /* Chips, badges. */
  --radius-md:  10px;  /* Cards, inputs. */
  --radius-lg:  16px;  /* Figures, mockups. */

  /* Type scale */
  --size-display:  clamp(2.6rem, 5.4vw, 4.1rem);  /* h1. */
  --size-h2:       clamp(1.7rem, 3vw, 2.35rem);  /* Section heading. */
  --size-h3:       1.06rem;  /* Card heading. */
  --size-lede:     1.09rem;  /* Hero and section lede. */
  --size-body:     1rem;  /* Prose. */
  --size-small:    0.88rem;  /* Captions, notes. */
  --size-micro:    0.78rem;  /* Legal, meta. */
}