/* The site's two looks, in one place.
 *
 * Every client-facing page draws in these colours by name (--ivory is the
 * ground, --ink the type and the main buttons, --sand the accent, and so
 * on), so changing a colour here changes it everywhere. The look a visitor
 * sees is set by theme.js: data-theme="dark" or data-theme="light" on the
 * page, with the default chosen there (DEFAULT_THEME).
 *
 * The names are the brand's original ones. In the dark look "ivory" holds
 * the black and "ink" the white: the names say what a colour does on the
 * page (ground, type), not what colour it is.
 *
 * Dark (24/10/2026): black and white with black leading, as the owner asked
 * after seeing a site she liked. A warm near black rather than pure black,
 * so it sits with the brand's warm ivory and sand and does not glare; a
 * warm white for type; sand kept as the one accent, which reads as a muted
 * gold on black. Contrast: white on the ground about 18:1, secondary text
 * about 7.5:1, both well above what reading needs. */

:root[data-theme="dark"] {
  --ivory:   #0F0E0D;   /* the ground: near black, warm */
  --ivory-2: #181716;   /* bands and quiet panels, a step up */
  --white:   #1D1B19;   /* cards and fields */
  --paper:   #1D1B19;
  --ink:     #F5F2ED;   /* type, and the main buttons */
  --stone:   #A6A097;   /* secondary text */
  --sand:    #C4A484;   /* the accent, unchanged */
  --sand-ink: #D2B794;  /* the accent when it is text */
  --line:    #2B2926;   /* rules and borders */
  --alert:   #E39A90;   /* errors, readable on black */

  /* Surfaces that were written as fixed colours: the header behind the
     page as it scrolls, a floating panel, the soft panel behind a photo
     still loading, and the hint text in an empty field. */
  --glass:        rgba(15, 14, 13, 0.86);
  --glass-strong: rgba(29, 27, 25, 0.94);
  --plate-hi:     rgba(255, 255, 255, 0.05);
  --plate-a:      #201E1B;
  --plate-b:      #262321;
  --placeholder:  #6F6A63;
  --on-photo:     #F4F1EC;   /* words printed over a photograph */
  --ok:           #8FC39C;   /* "done", "live": a green readable on black */
  color-scheme: dark;
}

:root[data-theme="light"] {
  --ivory:   #F4F1EC;
  --ivory-2: #EDE8E0;
  --white:   #FFFCF8;
  --paper:   #FFFCF8;
  --ink:     #141311;
  --stone:   #6B655E;
  --sand:    #C4A484;
  --sand-ink: #8A6A44;
  --line:    #E4DFD6;
  --alert:   #8C3A34;

  --glass:        rgba(244, 241, 236, 0.86);
  --glass-strong: rgba(255, 252, 248, 0.92);
  --plate-hi:     rgba(255, 252, 248, 0.95);
  --plate-a:      #E7E0D5;
  --plate-b:      #DCD3C6;
  --placeholder:  #B3ACA2;
  --on-photo:     #F4F1EC;
  --ok:           #3F6B4A;
  color-scheme: light;
}

/* Photographs keep their colour in either look; only what is drawn by the
   page changes. */

/* The Light / Dark buttons (any element with data-theme-set). */
.themeswitch { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.themeswitch button {
  font: inherit; font-size: 12px; letter-spacing: 0.04em; color: var(--stone);
  background: none; border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer;
}
.themeswitch button[aria-pressed="true"] { background: var(--ink); color: var(--ivory); }
.themeswitch button:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }