/* The site's shared look: white paper, black ink, one blue, Helvetica.
 *
 * It matches the blog (apps/blog/custom.scss: a white page set in Helvetica
 * Neue) instead of giving the apps a look of their own. Pages opt in with
 *   <link rel="stylesheet" href="../shared/theme.css">
 * and use the tokens below; the hub (index.html) was the first.
 *
 * Each section of the hub has one color, set with data-hue on an element
 * (bible, ai, evals, work, money, sport, stories) and read back as var(--hue). It marks
 * the section; it is not for text, since the money yellow fails contrast on
 * white. A page about one section can use its hue as its single color.
 */
:root {
  --paper: #ffffff;
  --ink: #111111;
  --ink-2: #555555;
  --ink-3: #767676;          /* the lightest gray that passes 4.5:1 on white */
  --rule: #111111;
  --rule-soft: #e2e2e2;
  --wash: #f4f4f2;           /* hover and selection backgrounds */
  --blue: #1f3fd9;           /* links, focus, the one accent */

  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --hue-bible: #1e4d2b;
  --hue-ai: #141414;
  --hue-work: #c2410c;
  --hue-money: #f2c230;
  --hue-sport: #005a9c;
  --hue-stories: #6d3fa3;
  --hue-evals: #0f766e;
}

[data-hue="bible"] { --hue: var(--hue-bible); }
[data-hue="ai"] { --hue: var(--hue-ai); }
[data-hue="work"] { --hue: var(--hue-work); }
[data-hue="money"] { --hue: var(--hue-money); }
[data-hue="sport"] { --hue: var(--hue-sport); }
[data-hue="stories"] { --hue: var(--hue-stories); }
[data-hue="evals"] { --hue: var(--hue-evals); }