/* The values every page of the product is drawn with (T30.2).
 *
 * The direction chosen in T30.1 was `hearth`: warm paper, a serif heading, soft cards --
 * a product that holds photographs of somebody's children rather than a control panel
 * (`state/DECISIONS.md`). This file is that direction stated once, for every page of the product, as
 * values for the variables Pico already reads. Nothing here is a rule of its own: a
 * palette that also moved things around would be a second layout arguing with the first.
 *
 * On the doubled selector: Pico writes its own light values on
 * `:root:not([data-theme="dark"])`, which out-specifies a plain `:root`. Written on that
 * one alone we would lose every value to the stylesheet we are refining. The document
 * pins `data-theme="light"` as well (`templates/base.html`), which is what keeps Pico's
 * `prefers-color-scheme: dark` block from ever matching -- belt and braces, because each
 * of the two has already been the one that failed on a candidate page.
 *
 * The typefaces are the ones a machine already has: this repository ships no CDN and no
 * font files, so a serif here is a stack of what Windows, macOS and Linux each call one.
 */
:root,
:root:not([data-theme="dark"]) {
  color-scheme: light;

  --pico-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pico-font-size: 106.25%;
  --pico-line-height: 1.65;
  --pico-border-radius: 0.85rem;

  --pico-background-color: #fbf4ea;
  --pico-color: #3a2c22;
  --pico-h1-color: #2c2018;
  --pico-h2-color: #2c2018;
  --pico-h3-color: #2c2018;
  --pico-h4-color: #2c2018;
  --pico-h5-color: #2c2018;
  --pico-h6-color: #2c2018;
  --pico-muted-color: #7b6553;
  --pico-muted-border-color: #ecdcc7;
  --pico-border-color: #ecdcc7;

  --pico-primary: #ad4b1c;
  --pico-primary-background: #ad4b1c;
  --pico-primary-hover: #8e3c15;
  --pico-primary-hover-background: #8e3c15;
  --pico-primary-focus: rgba(173, 75, 28, 0.25);
  --pico-primary-inverse: #fffaf3;
  --pico-primary-underline: rgba(173, 75, 28, 0.4);

  --pico-secondary: #7b6553;
  --pico-secondary-background: #7b6553;
  --pico-secondary-hover: #61503f;
  --pico-secondary-hover-background: #61503f;
  --pico-secondary-inverse: #fffaf3;

  --pico-card-background-color: #fffaf3;
  --pico-card-border-color: #eddcc6;
  --pico-card-box-shadow: 0 10px 24px rgba(87, 56, 30, 0.09);
  --pico-card-sectioning-background-color: #f7ead9;
  --pico-box-shadow: 0 10px 24px rgba(87, 56, 30, 0.09);

  --pico-form-element-background-color: #fffaf3;
  --pico-form-element-border-color: #e0cdb4;
  --pico-form-element-focus-color: var(--pico-primary-focus);
  --pico-form-element-invalid-border-color: #a8321d;
  --pico-form-element-invalid-active-border-color: #a8321d;
  --pico-form-element-invalid-focus-color: rgba(168, 50, 29, 0.25);

  /* Ours rather than Pico's: the frame in `layout.css` needs a serif stack, a page width
   * and a warning colour of its own, and a value repeated in three rules is a value that
   * gets changed in two of them. */
  --hc-serif-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --hc-page-width: 63rem;
  --hc-paper: #fffaf3;
  --hc-warning-background: #fdf0d5;
  --hc-warning-border: #e6c98d;
}