/* The palette, and only the palette.
   ---------------------------------------------------------------------------
   Everything else in app.css refers to these names and never to a colour, so
   this file is the whole of what has to change to retune the site.

   It can be overridden without rebuilding anything. Put a file at the path in
   THEME_FILE (deploy/.env, by default /app/var/theme.css) containing just the
   tokens you want different, and it is served after this one and wins. The
   server watches its modification time, so the address changes when the file
   does and nobody gets a stale copy out of a cache.

   Two colours are not here because they are drawn by Go rather than by the
   browser: the map pin and the paper behind a tile that failed to load. See
   MAP_PIN_COLOR in deploy/.env and internal/staticmap/palette.go.
   --------------------------------------------------------------------------- */

:root {
  /* Warm paper, not clinical white. */
  --bg:          #FAF8F4;
  --bg-sunk:     #F3EFE7;
  --surface:     #FFFFFF;
  --surface-alt: #FBF9F5;

  --ink:      #2B332E;
  --ink-soft: #55605A;
  --muted:    #838D87;

  --line:      #E6E1D6;
  --line-soft: #F0ECE3;

  /* Eucalyptus. Present, never loud. */
  --accent:      #55806A;
  --accent-deep: #3D6350;
  --accent-wash: #EDF3EF;

  /* A warm counterweight, used sparingly: the QR panel, a highlight. */
  --warm:      #A87A5B;
  --warm-wash: #FAF3EC;

  --danger:      #9B4A3D;
  --danger-wash: #FBF0EE;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
           Arial, sans-serif;

  --radius:    10px;
  --radius-sm: 6px;

  /* Shadows stay barely-there; a memorial page should not look like a card
     game. */
  --shadow:    0 1px 2px rgba(43, 51, 46, .04), 0 6px 20px rgba(43, 51, 46, .05);
  --shadow-sm: 0 1px 2px rgba(43, 51, 46, .05);

  --measure: 68ch;
  --wrap:    1080px;
  --wrap-narrow: 720px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #191C1A;
    --bg-sunk:     #141715;
    --surface:     #212623;
    --surface-alt: #1C201E;

    --ink:      #E8E9E4;
    --ink-soft: #B9C0BA;
    --muted:    #8E968F;

    --line:      #333A36;
    --line-soft: #2A302C;

    --accent:      #8DBBA1;
    --accent-deep: #A9CEB7;
    --accent-wash: #232C27;

    --warm:      #C9A183;
    --warm-wash: #2A2622;

    --danger:      #D9897C;
    --danger-wash: #2C2220;

    --shadow:    0 1px 2px rgba(0, 0, 0, .25), 0 6px 20px rgba(0, 0, 0, .22);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25);
  }
}