/* Barlow, shipped with the app (Google Fonts, OFL). design/design_1.md: single family, 400/500/600/700. */
@font-face{font-family:'Barlow';font-weight:400;src:url(fonts/Barlow-Regular.ttf) format('truetype')}
@font-face{font-family:'Barlow';font-weight:500;src:url(fonts/Barlow-Medium.ttf) format('truetype')}
@font-face{font-family:'Barlow';font-weight:600;src:url(fonts/Barlow-SemiBold.ttf) format('truetype')}
@font-face{font-family:'Barlow';font-weight:700;src:url(fonts/Barlow-Bold.ttf) format('truetype')}
/* KEWAZO design tokens — extracted verbatim from design.kewazo.com (v2.0.1, 2026-06-08)
   via computed :root custom properties. Do not hardcode colour/font/radius anywhere else. */
:root{
  /* teal ramp */
  --t900:#1F3331; --t800:#14433E; --t700:#1A5E59; --t600:#058B8C; --t500:#1EA7A6;
  --t400:#40C0C0; --t300:#A3DADB; --t200:#D9F0F1; --t100:#F5FAFB;
  /* blue-grey ramp */
  --b900:#263D42; --b800:#3E5A5D; --b700:#51777C; --b600:#6C979D; --b500:#9FBDC1;
  --b400:#BAD1D4; --b300:#D8E5E7; --b200:#F2F6F7; --b100:#FAFCFC;
  /* neutral ramp */
  --d900:#1B1F24; --d800:#2B3037; --d700:#414C59; --d600:#576779; --d500:#7A899C;
  --d400:#AFB9C6; --d300:#D7DEE6; --d200:#EAEDF3; --d100:#F5F7FB;
  /* mono ramp */
  --m900:#191919; --m800:#434343; --m700:#555555; --m600:#8C8C8C; --m500:#BABABB;
  --m400:#D9D9D9; --m300:#EEEEEE; --m200:#F4F4F4; --m100:#FFFFFF;
  /* semantic */
  --red:#EC1010; --red-bg:#FEF3F3; --yel:#F9EE89; --yel-lt:#F9FF93;
  --print1:#00B2A9; --print2:#056B6C; --print3:#4CB0C0;
  --text-1:#1B1F24; --text-2:#414C59; --text-3:#7A899C; --text-dis:#D7DEE6;
  --bg-1:#FFFFFF; --bg-2:#F5F7FB; --bg-3:#EAEDF3; --bg-err:#FEF3F3;
  --border-1:#D7DEE6; --border-2:#E6E8EB; --border-err:#EC1010;
  --act:#40C0C0; --act-hov:#1EA7A6; --act2:#1B1F24;
  /* layout */
  --gnb:64px; --side:213px; --body-w:900px; --pg:40px; --col-gap:16px;
  /* type */
  --ff:'Barlow',-apple-system,BlinkMacSystemFont,sans-serif;
  --ff-display:'Barlow',-apple-system,BlinkMacSystemFont,sans-serif;   /* slide spec: Barlow only */
  /* radius — the system is deliberately SQUARE */
  --r-xs:0px; --r-sm:0px; --r-md:0px; --r-lg:0px; --r-xl:0px; --r-pill:0px;  /* design_1.md: no corner radius anywhere */
  /* elevation */
  --sh-xs:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh-sm:0 2px 6px rgba(12,10,9,.08),0 0 0 1px rgba(27,31,36,.04);
  --sh-md:0 4px 12px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);
  --sh-lg:0 12px 32px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.06);
  --sh-xl:0 24px 64px rgba(0,0,0,.12),0 8px 24px rgba(0,0,0,.07),0 2px 6px rgba(0,0,0,.04);

  /* --- app semantic mapping (derived; see TODO below) --- */
  --ok:var(--t600); --ok-bg:var(--t200);          /* confirmed / match */
  --bad:var(--red); --bad-bg:var(--red-bg);        /* difference vs manual */
  --warn:#8A6D00; --warn-bg:var(--yel-lt);         /* flagged judgment call */
  /* --text-3 (#7A899C) measures 3.57:1 on white — below the WCAG AA 4.5:1 floor for normal
     text — and this app sets it at 9-11px on the densest prose it has. --text-3-sm is the same
     hue darkened to clear AA (5.46:1) and is used wherever small muted text appears. The brand
     ramp itself is untouched; --text-3 stays correct for 12px and up. */
  --text-3-sm:#5A6B80;
  /* --bad on --bad-bg measures 4.16:1 at the small sizes the status chips use. --bad-ink is the
     same red darkened just enough to clear AA (4.76:1) for text ON the tint; --bad stays the
     stroke/fill colour. */
  --bad-ink:#DE0F0F;
  /* The brand teal --t600 measures 3.48:1 on white — fine for a 15px heading, short of AA for the
     10-11px labels this app uses it on. --ok-ink is --t700, which clears it at 7.5:1. */
  --ok-ink:var(--t700);
  /* `--muted` was referenced in 7 places and never defined, so those elements silently inherited
     whatever colour they landed on. It is the small muted register. */
  --muted:var(--text-3-sm);
  /* Categorical palette for the page overview (one colour per item type). The brand ramps have no
     categorical set; these are dark enough to carry white 11px tag text (all >= 4.5:1) and avoid
     --red, which means "difference" everywhere else in the app. Pipe runs are neutral. */
  --cat1:#1F6FB4; --cat2:#C2410C; --cat3:#7C3AED; --cat4:#15803D; --cat5:#B91C7C; --cat6:#A16207;
  --cat7:#0E7490; --cat8:#4338CA; --cat9:#9F1239; --cat10:#4D7C0F; --cat11:#92400E; --cat12:#86198F;
  --cat-pipe:#576779;
}
/* TODO(design): the guide has no GREEN and no success/warning tokens. Match/confirmed is mapped to
   the brand teal (--t600 on --t200) because Turner's comparison language is green/red/yellow and
   teal is the closest brand-true "good" signal. Warning text uses a darkened yellow (#8A6D00) so
   text on --yel-lt clears WCAG AA; the guide supplies no accessible on-yellow text colour.
   TODO(design): 'Barlow' and 'LIFTBOT' are referenced by the token but no webfont files were
   available to download; the stack falls back to system sans. Drop the .woff2 files into
   static/fonts/ and add @font-face to pin the real brand type. */