:root {
  --primary-faded:  #ECF4F6;
  --primary:        #227B99;
  --primary-dark:   #11607b;
  --primary-darker: #00465D;
  --secondary:      #BD4B00;
  /* Darkened from the #929397 in CSS.md. That value is 3.07:1 on white --
     under the 4.5:1 WCAG AA needs for normal text -- and while CSS.md
     describes it as disabled/placeholder grey, which is exempt, the app
     uses it for real muted copy: stat labels, hints, timestamps, help text.
     282 declarations set it as a text colour against 2 that do not. At
     #6B6C70 the same grey reads 5.24:1 on white and still clears AA on the
     tinted backgrounds it sits on (4.7-4.9:1). The CRM should take the same
     value so the palettes stay identical. */
  --accent:         #6B6C70;
  --accent-faded:   #e7e7e7;
  --dark:           #212533;

  /* Semantic state colours, carried over from the CRM so the two apps agree on
     what "error", "caution" and "success" look like. The palette proper has no
     success or caution token -- --secondary is the one alarm colour -- so these
     are the CRM's values, chosen there to clear WCAG AA against white. Reuse
     them rather than inventing a second green or a second red. */
  --state-red:      var(--secondary);
  --state-red-bg:   #FBEFE9;
  --state-amber:    #8A6100;
  --state-amber-bg: #FDF6E7;
  --state-green:    #1B7A4B;
  --state-green-bg: #EEF7F1;

  /* Surface and text aliases. Templates were already using these names in
     inline <style> blocks -- var(--surface), var(--text), var(--border) and the
     rest -- but nothing ever defined them, so those declarations were invalid
     and silently dropped. .project-row was the visible one: it asked for
     var(--surface) and got no background at all. They resolve to the palette
     rather than introducing new colours. */
  --surface:     #ffffff;
  --bg:          #f4f4f4;
  --text:        #444444;
  --text-muted:  var(--accent);
  --muted:       var(--accent);
  --border:      var(--accent-faded);
  --input-bg:    var(--primary-faded);
  --danger:      var(--secondary);

  --size-1:  0.09rem;
  --size-2:  0.14rem;
  --size-3:  0.23rem;
  --size-4:  0.38rem;
  --size-5:  0.62rem;
  --size-6:  1rem;
  --size-7:  1.62rem;
  --size-8:  2.62rem;
  --size-9:  4.24rem;
  --size-10: 6.85rem;

  --size--1:  -0.09rem;
  --size--2:  -0.14rem;
  --size--3:  -0.23rem;
  --size--4:  -0.38rem;
  --size--5:  -0.62rem;
  --size--6:  -1rem;
  --size--7:  -1.62rem;
  --size--8:  -2.62rem;
  --size--9:  -4.24rem;
  --size--10: -6.85rem;

  --shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
}