/* The site's colours and typefaces, by look. They are code.claude.com's own, as measured
   there: its dark for the look of photographs, its light for the look of drawings; a
   serif for headings (Newsreader, kept here under the SIL Open Font License) and the
   system's sans for everything said. The crab's own red is kept for the mark and the
   small labels. Every name here begins --s-: the page itself (index.html) loads this file
   too, for its way in, and has colours and typefaces of its own under the plain names. */
@font-face {
  font-family: "Newsreader";
  src: url("/site/fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/site/fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --s-bg: #141413;
  --s-surface: #1f1e1d;
  --s-surface-2: #262624;
  --s-line: #30302e;
  --s-text: #faf9f5;
  --s-text-2: #c3c2b7;
  --s-muted: #9c9a92;
  --s-faint: #87867f;
  --s-accent: #e2664a;
  --s-code: #0b0b0b;
  --s-ok: #7fb685;
  --s-hi: #d9a25a;
  --s-btn: #faf9f5;
  --s-btn-text: #141413;
  --s-btn-2: #30302e;
  --s-btn-2-text: #faf9f5;
  --s-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --s-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --s-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* The other look: the same site, with its drawings, on the light */
[data-look="cute"] {
  --s-bg: #faf9f5;
  --s-surface: #f0eee6;
  --s-surface-2: #e8e6dc;
  --s-line: #dedcd1;
  --s-text: #141413;
  --s-text-2: #3d3d3a;
  --s-muted: #5e5d59;
  --s-faint: #73726c;
  --s-accent: #c6452c;
  --s-code: #1f1e1d;
  --s-ok: #8fc796;
  --s-hi: #e0b06c;
  --s-btn: #141413;
  --s-btn-text: #faf9f5;
  --s-btn-2: #e8e6dc;
  --s-btn-2-text: #141413;
}
/* (a terminal is dark in either look) */
[data-look="cute"] .term { color: #c3c2b7; }
[data-look="cute"] .term .h { color: #faf9f5; }