/* The one place the site's colors are decided.
 *
 * Why this file exists. There is no shared stylesheet on this site: all 1,173
 * pages carry their own copy, which is why a survey found 89 slightly different
 * versions of the same one. Changing a color meant a scripted pass over 28,827
 * occurrences in 1,176 files, and nothing stopped them drifting apart again.
 *
 * This is loaded last on every page, after each page's own <style>, so what it
 * says wins. Nothing was removed to make room for it -- the inline styles are
 * untouched and still work on their own. From here on, a color change is an
 * edit to this file plus `node scripts/inject-shared-palette.js`.
 *
 * Every value below was measured against the backgrounds the site actually
 * uses, not picked by eye. Small text needs 4.5:1 to read without effort; large
 * or bold text needs 3:1.
 */

:root {
  /* Grounds */
  --bg:            #FAF9F6;
  --surface-1:     #FFFFFF;
  --surface-2:     #F2F0EA;
  --surface-3:     #E9E6DE;
  --panel-dark:    #10131A;

  /* The accent.
     #0B7E95 measured exactly 4.50:1 on --bg, which is the pass mark to two
     decimal places and no margin at all, so every slightly darker surface put
     it under: 4.41 on the mint tint, 4.34 on the gray, 4.27 on the panels.
     #0A7188 clears 5.07:1 against every ground on this site. */
  --cyan:          #0A7188;
  --cyan-hover:    #0A6B80;
  --cyan-ink:      #FFFFFF;   /* text ON the accent: 5.40:1 */
  --cyan-wash:     rgba(10,113,136,.07);
  --teal:          var(--cyan);

  /* The accent again, for dark grounds.
     One hex cannot be readable on both a cream page and a navy card: darkening
     the teal to fix the page took the dark-card links from 3.21:1 to 2.69:1.
     On a dark ground the accent has to go lighter, so it gets its own token
     rather than an override nobody can find later. 4.75:1 on #142836. */
  --teal-on-dark:  #2A9DB5;

  /* The call-to-action fill.
     #E8501F carried white text at 3.75:1. #CC4318 carries the same white at
     4.79:1, so the buttons keep reading as white-on-orange. */
  --coral:         #CC4318;
  --coral-ink:     #FFFFFF;   /* 4.79:1 */
  --coral-text:    #B03A0E;   /* the fill is not a text color: #CC4318 as text
                                 is 4.36:1 on the warm tint, this is 5.53:1 */

  /* The success/"key takeaway" green.
     #0A9D6C was 3.24:1 on the pale mint panel it is always used on, and was
     never in range. #087A54 is 4.98:1 there and 5.72:1 on --bg. */
  --mint:          #087A54;
  --mint-bright:   #0A9D6C;   /* the old value, for fills and dots, never text */

  --purple:        #7C4DBE;

  /* Text */
  --white:         #15202E;   /* the strongest ink, despite the name */
  --body:          #3D4C5E;
  /* #5F7080 measured 4.48:1 on the warm panels and 4.50:1 on the cool ones --
     at and just under the line. #5A6B7A is 4.83:1 on the worst of them. */
  --muted:         #5A6B7A;
  /* And the same tone for dark panels. Darkening --muted for the light pages
     took the dark "villain" panel from 3.75:1 to 3.48:1: on a dark ground the
     quiet tone has to go lighter, the same way the accent does. 5.66:1. */
  --muted-on-dark: #7E8DA0;

  /* Lines */
  --border:        rgba(21,32,46,.12);
  --border-strong: rgba(21,32,46,.2);
  --hairline:      rgba(21,32,46,.06);

  --font:          'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Scoped corrections.
   These are cases where the right fix is a different token in that place, not
   a different value for the token everywhere. */

/* Links inside a dark panel or card: the page-colored teal is 2.69:1 there. */
.panel-dark a,
.dark-panel a,
.dd-card a,
.callout-dark a { color: var(--teal-on-dark); }

/* The "deeper dive" cards sit on a bright cyan wash, where the teal label and
   link measured 3.20:1. The darkest ink on that wash is 9.37:1. */
.dd-label,
.dd-link { color: var(--white); }

/* The dark demonstration panels run the light palette's quiet tone over a near
   black ground, where it reads at 3.48:1. */
.villain,
.villain-screen,
.villain-void,
.villain-label,
.villain-q { color: var(--muted-on-dark); }