/* Design tokens shared by the public site (/css/site.css) and the staff app (/app/css/app.css).
   Blue and white, as agreed with Moana on 8 Nov 2026. Printed lot labels keep their own colours (label.css).
   Fonts are self-hosted (SIL OFL): IBM Plex Sans (variable 400 to 600), Literata 600, IBM Plex Mono 500. */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/ibm-plex-sans-latin.woff2) format('woff2'); }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/literata-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-mono-500-latin.woff2) format('woff2'); }

:root {
  /* Brand: blue, ink and grey are taken from the Kavalactone Ledger logo Poli sent on 8 Nov 2026. */
  --navy-950: #0d1421;
  --navy-900: #16245a;
  --navy-800: #1f3380;
  --blue-800: #2a4bd1;
  --blue-700: #3861fb;
  --blue-600: #5478fc;
  --blue-500: #3861fb;
  --blue-200: #c4d1fd;
  --blue-100: #e3e9fe;
  --blue-50: #f0f3ff;
  --page: #ffffff;
  --page-2: #f5f7fe;
  --card: #ffffff;

  /* Text and lines */
  --ink: #0d1421;
  --ink-soft: #3b4659;
  --muted: #58667e;
  --line: #e3e7f0;
  --line-strong: #c6cede;
  --link: #3861fb;

  /* States */
  --ok: #2b6a43;
  --ok-bg: #ebf3ec;
  --ok-line: #c2dbc9;
  --bad: #a63f2a;
  --bad-bg: #fbefea;
  --bad-line: #ecc9bd;
  --watch: #8a5a00;
  --warn-bg: #fbf3e1;
  --warn-line: #e9d5a4;

  /* Growth stages, light to dark. Adjacent stages differ in lightness as well as hue. */
  --s0: #e3e9fe;
  --s1: #c4d1fd;
  --s2: #93a9fc;
  --s3: #6a8bfc;
  --s4: #2f4fd4;
  --s5: #16245a;

  /* Type */
  --serif: 'Literata', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: .78rem;
  --text-sm: .875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.5rem, 3vw, 1.85rem);
  --text-3xl: clamp(2rem, 5vw, 3.1rem);
  --text-4xl: clamp(2.6rem, 8vw, 4.6rem);

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Shape and depth */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -12px rgba(16, 24, 40, .16);
  --shadow-2: 0 2px 4px rgba(16, 24, 40, .06), 0 18px 40px -16px rgba(16, 24, 40, .28);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;
}

/* Browser-drawn surfaces take the palette too: selection, caret, native controls, scrollbars. */
html { accent-color: var(--blue-700); scrollbar-color: var(--line-strong) transparent; }
::selection { background: var(--blue-200); color: var(--navy-950); }
input, textarea { caret-color: var(--blue-700); }

.s0 { --stage: var(--s0); } .s1 { --stage: var(--s1); } .s2 { --stage: var(--s2); }
.s3 { --stage: var(--s3); } .s4 { --stage: var(--s4); } .s5 { --stage: var(--s5); }
.s0, .s1, .s2, .s3, .s4, .s5 { background: var(--stage); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}