/* The site's colours, both schemes — first stylesheet on every page.
     Light is the default: warm neutral paper, green for accents only
     (links, --accent, the button's neon, the highlighter, the mark). Dark
     keys on canon's colour-scheme contract (toolkit/theme): data-theme="dark"
     on <html>, or no attribute and a dark OS. Every text/ground pair here is
     WCAG AA (4.5:1) on --paper, --paper-alt and --surface. */
  :root {
    --paper:     #faf9f6;
    --paper-alt: #f1efe9;
    --surface:   #ffffff; /* cards, inputs, the photo's border */
    --ink:       #0d1110;
    --ink-soft:  #33302a;
    --muted:     #645e56;
    --rule:      #c9c4b7;
    --rule-soft: #e2dfd7;
    --accent:    #1a7a3c; /* links, focus, emphasis marks */
    --on-accent: #faf9f6;
    --hl:        #b6ff3b; /* highlighter and fills only — never text on light */
    --on-hl:     #0d1110;
    /* the .hl band: a marker stroke under the text on light; the whole line
       box on dark, so the text sits on the neon in --hl-ink */
    --hl-from:   58%;
    --hl-to:     92%;
    --hl-ink:    currentcolor;
    --error:     #c4321e;
    --btn:       #0d1110;
    --btn-ink:   #b6ff3b;
    --btn-hover: #33302a;
    --mark:      #0c0f0d; /* the header mark's tile: black on light, neon on dark */
    --mark-ink:  #c6ff1a; /* its F */
    --shade:     #0d1110; /* drop shadows, mixed with transparent */
    --glint:     rgb(255 255 255 / 0.7);
    --sans:  'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --serif: 'Newsreader', Georgia, serif;
    --gutter: clamp(1rem, 4vw, 3rem);
    color-scheme: light;
  }
  :root[data-theme='dark'] {
    --paper:     #0c0f0d;
    --paper-alt: #151a17;
    --surface:   #151a17;
    --ink:       #e8f0ea;
    --ink-soft:  #b8c4bc;
    --muted:     #7f8c84;
    --rule:      #2b3530;
    --rule-soft: #1d2420;
    --accent:    #39f56a;
    --on-accent: #0c0f0d;
    --hl:        #c6ff1a;
    --on-hl:     #0c0f0d;
    --hl-from:   0%;
    --hl-to:     100%;
    --hl-ink:    #0c0f0d;
    --error:     #ff6b5b;
    --btn:       #39f56a;
    --btn-ink:   #0c0f0d;
    --btn-hover: #c6ff1a;
    --mark:      #c6ff1a;
    --mark-ink:  #0c0f0d;
    --shade:     #000000;
    --glint:     rgb(255 255 255 / 0.08);
    color-scheme: dark;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
      --paper:     #0c0f0d;
      --paper-alt: #151a17;
      --surface:   #151a17;
      --ink:       #e8f0ea;
      --ink-soft:  #b8c4bc;
      --muted:     #7f8c84;
      --rule:      #2b3530;
      --rule-soft: #1d2420;
      --accent:    #39f56a;
      --on-accent: #0c0f0d;
      --hl:        #c6ff1a;
      --on-hl:     #0c0f0d;
      --hl-from:   0%;
      --hl-to:     100%;
      --hl-ink:    #0c0f0d;
      --error:     #ff6b5b;
      --btn:       #39f56a;
      --btn-ink:   #0c0f0d;
      --btn-hover: #c6ff1a;
      --mark:      #c6ff1a;
      --mark-ink:  #0c0f0d;
      --shade:     #000000;
      --glint:     rgb(255 255 255 / 0.08);
      color-scheme: dark;
    }
  }

  /* The header's wordmark (layout.html "wordmark"): the tile mark beside the
     name, on every page's stylesheet set. */
  .name { display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; }
  .name .mark { height: 1.5em; width: auto; flex: none; }
  .name .mark .tile { fill: var(--mark); }
  .name .mark .glyph { fill: var(--mark-ink); }

  /* Alpine-driven controls (the theme toggle) stay hidden until it runs. */
  [x-cloak] { display: none !important; }

  /* The colour-scheme control (layout.html "theme-toggle", canon's
     registerThemeToggle) in the site's own look. */
  .theme-toggle {
    display: inline-flex; gap: 0.15rem; padding: 0.15rem;
    border: 1px solid var(--rule); border-radius: 999px; font-size: 0.8rem;
  }
  .theme-toggle button {
    font: inherit; color: var(--muted); background: transparent; border: 0;
    border-radius: 999px; padding: 0.15rem 0.65rem; cursor: pointer;
  }
  .theme-toggle button:hover { color: var(--ink); }
  .theme-toggle button[aria-pressed='true'] { background: var(--ink); color: var(--paper); }