/*
 * Veercal design tokens, v2 ("Tell-tale"). Canonical source.
 *
 * Mirrored in src/design/v2/tokens.js for the React app. Change both together;
 * src/design/v2/tokens-sync.test.js fails if they drift.
 *
 * Rules for using these live in docs/brand/DESIGN.md. The short version:
 * colour means something. Amber = an amount (the level). Green / amber / red on
 * a meter = normal / check this / stop and think. Blue = information and focus.
 * Nothing else is coloured.
 *
 * Light mode only for now.
 */

:root {
  /* Surfaces */
  --vc-cabin:          #F2F0EB;  /* page background */
  --vc-surface:        #FFFFFF;  /* cards, inputs */
  --vc-tint:           #E4E0D8;  /* empty part of chart gauges, asides */
  --vc-ink:            #16181B;  /* text, dark bands, the empty part of a level */

  /* Lines */
  --vc-line:           #D6D1C7;  /* dividers, card borders (decorative) */
  --vc-line-strong:    #8F8A80;  /* input borders: 3.4:1 on white */

  /* Text */
  --vc-text:           #16181B;  /* 15.6:1 on cabin */
  --vc-text-secondary: #4A4D52;  /* 7.5:1 on cabin, 8.5:1 on white */
  --vc-text-on-ink:    #F2F0EB;
  --vc-text-on-ink-secondary: #C9C6BF; /* 10.4:1 on ink */

  /* Signal colours: only ever used with meaning */
  --vc-amber:          #E89B0C;  /* the level fill; meter 3-4 "check this". Never text on light */
  --vc-amber-text:     #8A5300;  /* amber when it has to be text on light: 5.6:1 */
  --vc-green:          #17784A;  /* meter 1-2 "normal"; positive status. 4.8:1 on cabin */
  --vc-red:            #C22B24;  /* meter 5 "stop and think"; errors. 5.0:1 on cabin */
  --vc-blue:           #2457C5;  /* information, links on dark, focus ring. 5.7:1 on cabin */

  /* Type: one family. Barlow 500 body, 600 labels, 700 headings and figures */
  --vc-font: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vc-fw-body: 500;
  --vc-fw-label: 600;
  --vc-fw-head: 700;

  --vc-fs-xs:   13px;
  --vc-fs-sm:   15px;
  --vc-fs-base: 17px;
  --vc-fs-lg:   19px;
  --vc-fs-xl:   21px;
  --vc-fs-2xl:  24px;
  --vc-fs-3xl:  32px;
  --vc-fs-4xl:  clamp(36px, 4.4vw, 56px);
  --vc-fs-5xl:  clamp(44px, 5.4vw, 72px);

  --vc-lh-tight: 1.04;
  --vc-lh-head:  1.15;
  --vc-lh-body:  1.55;
  --vc-lh-prose: 1.65;

  --vc-track-head: -0.01em;

  /* Spacing: 4px base */
  --vc-sp-1: 4px;
  --vc-sp-2: 8px;
  --vc-sp-3: 12px;
  --vc-sp-4: 16px;
  --vc-sp-5: 20px;
  --vc-sp-6: 24px;
  --vc-sp-7: 32px;
  --vc-sp-8: 40px;
  --vc-sp-9: 56px;
  --vc-sp-10: 72px;
  --vc-sp-11: 96px;

  /* Radius */
  --vc-r-xs: 2px;    /* gauges */
  --vc-r-sm: 6px;    /* chips */
  --vc-r-md: 10px;   /* buttons, inputs, doors */
  --vc-r-lg: 16px;   /* cards */

  /* Layout */
  --vc-max: 1200px;
  --vc-gutter: 32px;
  --vc-gutter-sm: 20px;

  /* Gauges (see docs/brand/DESIGN.md, "The two instruments") */
  --vc-gauge-w: 14px;
  --vc-gauge-h: 56px;      /* 1:4, the proportion of the l */
  --vc-gauge-gap: 3px;     /* the split at the level */
  --vc-meter-unlit-opacity: 0.12;

  /* Focus */
  --vc-focus: 3px solid #2457C5;
  --vc-focus-offset: 2px;
}