/* tokens.css — generated from design-tokens.json v1.1 (WEB-02).
   THE ONLY FILE WITH HEX VALUES. League brand colours arrive from data
   into --card-brand per card (forge-method.md §4 exception). */
:root {
  /* color.web.css_vars — canon */
  --vs-white: #FFFFFF;
  --vs-blue: #002363;
  --vs-blue-light: #002C91;
  --vs-red: #B00000;
  --vs-grad: linear-gradient(45deg, #002363 0%, #002C91 50%, #002363 100%);
  --vs-radius: 8px;
  --vs-space: 8px;
  --vs-font: 'Onest', 'Montserrat', system-ui, sans-serif;

  /* derived: grey is forbidden — secondary tone = blue at opacity */
  --vs-blue-70: rgba(0, 35, 99, 0.70);
  --vs-blue-60: rgba(0, 35, 99, 0.60);
  --vs-blue-40: rgba(0, 35, 99, 0.40);
  --vs-blue-15: rgba(0, 35, 99, 0.15);
  --vs-blue-12: rgba(0, 35, 99, 0.12);
  --vs-blue-06: rgba(0, 35, 99, 0.06);
  --vs-white-80: rgba(255, 255, 255, 0.80);
  --vs-white-30: rgba(255, 255, 255, 0.30);
  --vs-white-15: rgba(255, 255, 255, 0.15);

  /* grid: 12 columns, module 8, margin 80 (scaled to 1280 desktop-first) */
  --vs-maxw: 1280px;
  --vs-margin: 40px;
  --vs-gutter: 24px;

  /* typography scale — design-tokens.json typography.scale_web, min 14px */
  --fs-h1: 40px;
  --fs-h2: 28px;
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-caption: 14px;
  --fs-kpi: 34px;
  --lh-head: 1.2;
  --lh-body: 1.45;

  --vs-transition: 150ms ease-out;
}