/* Span's two themes for the plain HTML pages: /stretch, /strength, /nidra, /t06 and
   /ai-tech-fundamentals. Paper by default, lights off when the device asks
   for dark or the visitor presses the switch.

   These pages have no build step, so they cannot import
   src/styles/tokens.css. This file carries its colours. tokens.css is the
   source of truth: change a colour there and here. The switch itself is
   /span-theme.js; each page sets <html data-theme> before it draws with a
   few inline lines in its <head>, so neither theme flashes.

   Caveat, the hand for notes and the switch, is served from this site like
   Alegreya Sans, so the tools still make no third-party request.
   Licence: /fonts/OFL-Caveat.txt. */

@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/caveat-latin-600-normal.woff2") format("woff2"); }

:root {
  /* Paper: cream paper, graphite ink, one terracotta accent. */
  --g: #f8efde;
  --ink: #211b17;
  --body: #3b332d;
  --mut: #544a42;
  --sub: #6b5f55;
  --line: #c9b8a3;
  --line2: #a8968a;
  --accent: #c8845c;        /* brush strokes and wavy underlines. Never text. */
  --accent-text: #9e5530;   /* handwritten notes and the switch */
  --swash-opacity: 0.6;

  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --fs-hand: 26px;
  --lh-hand: 1.05;
}

/* Lights off: written twice because a media query cannot share a block with
   an attribute selector. Keep them the same. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="paper"]) {
    --g: #1a1512;
    --ink: #f0eae2;
    --body: #d8cfc5;
    --mut: #bcb2a7;
    --sub: #9c9186;
    --line: #4a3f37;
    --line2: #6b5f55;
    --accent: #c8845c;
    --accent-text: #e3a07a;
    --swash-opacity: 0.55;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --g: #1a1512;
  --ink: #f0eae2;
  --body: #d8cfc5;
  --mut: #bcb2a7;
  --sub: #9c9186;
  --line: #4a3f37;
  --line2: #6b5f55;
  --accent: #c8845c;
  --accent-text: #e3a07a;
  --swash-opacity: 0.55;
  color-scheme: dark;
}

/* A brush stroke behind a word, as on the home page's "Projects". */
.swashed { position: relative; isolation: isolate; display: inline-block; }
.swash {
  position: absolute;
  z-index: -1;
  left: -0.35em;
  top: 12%;
  width: calc(100% + 0.7em);
  height: 86%;
  fill: var(--accent);
  opacity: var(--swash-opacity);
}

/* A handwritten note with a pen arrow drawn to what it is about, like the
   notes on the whiteboard sketch and the home page. The arrow is an inline
   <svg aria-hidden="true"> inside .scrawl, drawn with <path>s; the words are a
   .hand-note. (Not .note: the guide already uses that name for its callouts.) */
.hand-note {
  font-family: var(--hand);
  font-weight: 600;
  font-size: var(--fs-hand);
  line-height: var(--lh-hand);
  color: var(--accent-text);
}
.scrawl { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; }
.scrawl svg {
  flex: none;
  stroke: var(--accent-text);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scrawl .hand-note { margin: 14px 0 0; }
.scrawl.down .hand-note { margin-top: 0; }

/* The light switch: a handwritten word, at least a tap tall. */
.lights {
  font-family: var(--hand);
  font-weight: 600;
  font-size: var(--fs-hand);
  line-height: 1;
  color: var(--accent-text);
  background: none;
  border: 0;
  padding: 0 4px;
  min-height: 44px;
  cursor: pointer;
  text-decoration: underline wavy var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 7px;
}
.lights:hover { text-decoration-color: var(--ink); }

@media print {
  .lights, .scrawl { display: none; }
}