/* JJBC Express design tokens. Single source of truth for the front end. */
:root {
  /* Brand colour */
  --jj-green-900: #0B3D2E;   /* Banknote Green: primary */
  --jj-green-700: #1F6B4F;   /* Treasury Green: secondary */
  --jj-cream-100: #F6F1E4;   /* Paper Cream: page background */
  --jj-gold-500:  #B8923A;   /* Gold Foil: accent, rules, highlights */
  --jj-gold-700:  #8A6B1F;   /* Gold text on light backgrounds (AA) */
  --jj-mist-200:  #DCE8DF;   /* Mist: panels, dividers */
  --jj-ink-900:   #14201B;   /* Ink: body text */
  --jj-grey-600:  #5B6B63;   /* Muted text */

  /* Semantic */
  --bg: var(--jj-cream-100);
  --surface: #FFFFFF;
  --text: var(--jj-ink-900);
  --text-muted: var(--jj-grey-600);
  --primary: var(--jj-green-900);
  --primary-contrast: var(--jj-cream-100);
  --accent: var(--jj-gold-500);
  --line: var(--jj-mist-200);
  --ok: #1F6B4F; --warn: #B8923A; --danger: #A63A2B;

  /* Type: webfonts load later with these system fallbacks */
  --font-head: "Archivo", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-body: 1rem; --fs-small: .875rem; --fs-h3: 1.25rem; --fs-h2: 1.625rem; --fs-h1: clamp(2rem, 7vw, 3.25rem);

  /* Space, shape, motion */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem;
  --radius: 14px; --radius-sm: 8px; --tap: 44px;
  --shadow: 0 6px 24px rgba(11, 61, 46, .12);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-reduced-motion: reduce) { :root { --ease: linear; } * { animation: none !important; transition: none !important; } }
/* Breakpoints (mobile-first): 600px tablet, 960px desktop */