/* ameliebeerens.com: light and dark colour schemes (Amélie, 7 Oct 2026).
   Loaded right after design-system/tokens.css by both layouts, before the
   components, so every later stylesheet reads the scheme's tokens.

   The operator theme follows the visitor's system setting
   (prefers-color-scheme) and can be overridden by the control in the footer:
   site.js writes data-scheme="light" or "dark" on <html> and keeps it in
   localStorage; no attribute means "follow the system". The Brazen room
   (Amélie, 9 Oct 2026, then her /brazen brief of the same day) is the
   operator page, colour for colour: red stays the structural colour and the
   room's magenta is a scoped token of its own, declared and read in
   assets/brazen.css alone, in the places her brief names. Its block below
   undoes the pink-ground theme of design-system/tokens.css, which is not
   edited, and nothing else.

   Dark ground is the brand's ink (#21232c, a dark grey, never black); the
   dark panels (hero, footer, the dark band) go a step darker, the paper
   panels and cards a step lighter. Text is paper. Red stays the display and
   button colour: red on ink is 4.6:1, so in the dark scheme red type passes
   at every size (on white it passes at 24px and up only). Buttons keep ink
   text on red fill (4.6:1). Blush tiles keep ink text (7.96:1).

   Three tokens the section specs of 6 Oct named as hex values (mute, line,
   hover) live here in both schemes, so faq.css, references.css and
   nerve.css need no scheme logic of their own. */

:root {
  color-scheme: light;
  --mute: #6b6d78;                         /* small labels, 5.14:1 on white */
  --line: #e4e5ea;                         /* hairlines of the ruled sections */
  --hover: #fafbfd;                        /* a row or card under the mouse: her brand grey #f1f3f8 at a third, super subtle (Amélie, 8 Oct 2026: the full grey was too strong) */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321232c' stroke-width='2'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  --arrow-on-accent: var(--arrow);         /* the arrow on a red button: ink in both schemes */
  --arrow-invert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1f3f8' stroke-width='2'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");   /* the arrow on a button filled with the page's own ink (the Brazen room's dark button): paper here, ink in the dark scheme */
}

/* The Brazen room: the operator palette, unchanged (Amélie, 9 Oct 2026,
   her /brazen brief: pink is no longer the room's ground and no longer
   replaces red; red leads here as everywhere, and the room's magenta lives
   in assets/brazen.css alone, on the eyebrows, the italic word of each H2,
   the cards' top rule and price, the active states, the header dot and the
   block behind the hero picture). This block restores the
   values of :root, which the pink-ground theme of design-system/tokens.css
   overrides; that file is not edited. */
[data-theme="brazen"] {
  --surface: var(--white);
  --surface-alt: var(--paper);
  --surface-ink: var(--ink);
  --on-ink: var(--paper);
  --text: var(--ink);
  --text-muted: rgba(33, 35, 44, 0.78);
  --display: var(--red);
  --accent: var(--red);
  --on-accent: var(--ink);
  --band: var(--red);
  --on-band: var(--ink);
  --tint: var(--blush);
  --signal: var(--red);
  --rule: rgba(33, 35, 44, 0.16);
  --rule-strong: var(--ink);
  --focus-ring: var(--ink);
}

/* The dark scheme, both themes, stated once for the system setting and once for
   the manual override. Keep the two blocks identical. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="operator"]:not([data-scheme="light"]), :root[data-theme="brazen"]:not([data-scheme="light"]) {
    color-scheme: dark;
    --surface: #21232c;
    --surface-alt: #2d303b;
    --red-text: #fc6970;                   /* small red labels: 5.5:1 on the ground, 4.6:1 on a card */
    --surface-ink: #141519;
    --on-ink: var(--paper);
    --text: var(--paper);
    --text-muted: rgba(241, 243, 248, 0.78);
    --rule: rgba(241, 243, 248, 0.18);
    --rule-strong: var(--paper);
    --focus-ring: var(--paper);
    --mute: #a9acb8;                       /* 7.0:1 on the ground, 6.1:1 on a card */
    --line: rgba(241, 243, 248, 0.18);
    --hover: #2a2d37;
    --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1f3f8' stroke-width='2'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  --arrow-invert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321232c' stroke-width='2'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  }
}
:root[data-theme="operator"][data-scheme="dark"], :root[data-theme="brazen"][data-scheme="dark"] {
  color-scheme: dark;
  --surface: #21232c;
  --surface-alt: #2d303b;
  --red-text: #fc6970;
  --surface-ink: #141519;
  --on-ink: var(--paper);
  --text: var(--paper);
  --text-muted: rgba(241, 243, 248, 0.78);
  --rule: rgba(241, 243, 248, 0.18);
  --rule-strong: var(--paper);
  --focus-ring: var(--paper);
  --mute: #a9acb8;
  --line: rgba(241, 243, 248, 0.18);
  --hover: #2a2d37;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1f3f8' stroke-width='2'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  --arrow-invert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321232c' stroke-width='2'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
}
/* Blush keeps ink text whatever the scheme (the design system's quote block
   and the tinted tiles inherit the page's text colour otherwise). */
.ab-quote, .tile--tint, .quote-card--tint, .about__strip { color: var(--ink); }

/* The footer control: three words, the current one underlined. Hidden
   without script (nothing would happen). */
.scheme { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); font: 400 14px/20px var(--font-sans); }
.scheme__label { opacity: 0.8; }
.scheme button { margin: 0; padding: 2px 0; border: 0; background: none; color: inherit; font: 500 14px/20px var(--font-sans); cursor: pointer; opacity: 0.8; }
.scheme button:hover { opacity: 1; }
.scheme button[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.scheme button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
html:not(.js) .scheme { display: none; }