/* Tokens (owner round 13, UI polish): the ONE place the design language is written as values. Loaded before every other stylesheet; the older
   names the screens use (--nile, --brass, --clay, --paper, --card, --ink, --muted, --r, --sh-1...) are aliases of the roles below, set in
   base.css, design.css and native-ios.css, so a screen written against the old names keeps working and follows the roles.

   Colour ROLES, by meaning, never by hue:
   --c-primary   the one action colour of a screen or sheet (Record, Save, the selected chip, the tab icon). A company's accent colour replaces it.
   --c-accent    the identity colour (the hero card, the company mark). A company's primary colour replaces it.
   --ok / --warn / --bad   status: paid, check this, overdue. FIXED for every company, so a status is recognisable whatever the brand (Goal 3).
   Each colour has a -tint (a soft fill that carries dark text), an -ink (text in that colour, readable at 4.5:1 on the page and the card), and
   the primary a -fg (text on the solid colour). branding.js rewrites the primary and accent roles, and only those, when a company has colours. */
:root{
  /* colour roles, the light page */
  --c-primary:#146B52; --c-primary-fg:#FFFFFF; --c-primary-tint:#E4EFEA; --c-primary-ink:#146B52;
  --c-accent:#0A2540; --c-accent-fg:#FFFFFF; --c-accent-tint:#E6EAF0; --c-accent-ink:#0A2540;
  --ok:#146B52; --ok-tint:#E4EFEA; --ok-ink:#0E5540;
  --warn:#B08A4A; --warn-tint:#F5EEE0; --warn-ink:#7A5714;
  --bad:#A33B2B; --bad-tint:#F6E5E1; --bad-ink:#8A2E20;
  /* surfaces and text */
  --surface:#F5F6F3; --surface-2:#FFFFFF; --surface-3:#EDEFEA;
  --text:#0A2540; --text-2:#2C3E56; --text-3:#586374;
  --line:#DCDFD8; --line-soft:#EAECE6;
  /* shapes: one radius scale */
  --r-sm:10px; --r:14px; --r-lg:20px; --r-sheet:38px; --r-pill:100px;
  /* spacing: steps of 4 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:28px; --s8:32px;
  /* type: the scale from docs/DESIGN-RULES.md (every size is multiplied by --dt, the person's text size) */
  --t-display:34px; --t-h1:28px; --t-title:20px; --t-head:17px; --t-body:16px; --t-2:14px; --t-3:13px; --t-min:12px;
  /* one shadow for resting cards, one for floating things */
  --sh:0 1px 2px rgba(19,33,58,.05), 0 1px 3px rgba(19,33,58,.04);
  --sh-float:0 2px 8px rgba(19,33,58,.06), 0 12px 32px rgba(19,33,58,.08);
  /* controls */
  --ctl:44px; --ctl-lg:52px;
}
/* the company dark theme on the web (branding.js writes the surfaces inline; the status colours are brighter so they read on the dark card) */
html[data-company-dark="true"]{
  --c-primary-tint:#393a37; --c-accent-tint:#393a37;
  --ok:#3FCB97; --ok-tint:#12372B; --ok-ink:#7FDFBB;
  --warn:#E2B964; --warn-tint:#352A10; --warn-ink:#E8C97E;
  --bad:#FF7664; --bad-tint:#3D1D18; --bad-ink:#FF9A8C;
  --surface-3:#393a37;
}