/*********************************************************************


                            DARK THEME TOKENS

  Every colour and every font stack comes from here. Change a token, not a
  rule.

**********************************************************************/
:root {
  /* The site is written in a hand, not typeset. --font-hand (Kalam) carries
     body copy — it is the more compact and readable of the two in long
     blocks; --font-hand-display (Caveat) carries headings, nav, buttons and
     the cover's sketch title, where the looser slant does the work. Both
     ship real 400 and 700 cuts, so bold is drawn rather than synthesised —
     but never ask for any *other* weight, which would be. --font-mono is not
     decorative: the header cover is an editor, and its code has to line up. */
  --font-hand: Kalam, "Segoe Print", "Bradley Hand", Helvetica, Arial, sans-serif;
  --font-hand-display: Caveat, "Segoe Script", "Bradley Hand", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* The page ground is true black (#000). Nothing can sit *below* it, so the
     "inset" surfaces are a touch lighter than the page and read as recessed
     only because of their border — that is the one inversion pitch black
     forces. Elevations stay in single digits: on a #000 ground even #14 is a
     visible step, and --border does most of the separating work. */
  --bg: #000000;
  --bg-elev: #0b0c0e;
  --bg-elev-2: #15171b;
  --bg-inset: #08090b;
  --border: #2b2f38;
  --text: #c3c8d2;
  --text-strong: #eef0f4;
  --text-muted: #868d9a;
  --text-faint: #6a707c;
  /* The second pen. Emphasis in a notebook is a different ink, not a heavier
     font — and it has to be a hue the cyan accent is not, or bold prose reads
     as a link. Warm amber, 13.9:1 on the black ground. */
  --ink-emphasis: #ffd28a;
  --accent: #22d3ee;
  --accent-hover: #67e8f9;
  --accent-soft: rgba(34, 211, 238, 0.12);
  --accent-line: rgba(34, 211, 238, 0.35);
  /* Translucent ground for the blurred sticky navbar. Must be black-based or it
     shows up as a grey bar floating on the black page. */
  --bg-translucent: rgba(0, 0, 0, 0.78);
  /* Inert on a pure-black page (black on black); kept so any surface that ever
     sits on a lifted ground still has a shadow to reach for. Separation on
     this theme comes from --border. */
  --shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  /* Animated IDE cover — editor chrome, syntax palette, and the scrim that
     keeps the header text readable on top of it. */
  --ide-bg: #000000;
  --ide-chrome: #14171c;
  --ide-dot: #454d5d;
  --ide-gutter: #6c7586;
  --code-text: #ccd3de;
  --code-kw: #cbb8ff;
  --code-str: #b6f7dc;
  --code-fn: #b6f6ff;
  --code-type: #ffeda1;
  --code-num: #ffe2bd;
  --code-self: #ffb8e0;
  --scrim-top: rgba(0, 0, 0, 0.28);
  --scrim-mid: rgba(0, 0, 0, 0.46);
  --scrim-bottom: rgba(0, 0, 0, 0.72);
  --scrim-core: rgba(0, 0, 0, 0.9);
  /* Hand-drawn architecture sketch in the right pane. */
  --sketch-stroke: #dde3ec;
  --sketch-ink: #f3f6fa;
  --sketch-dim: #9ba4b4;
}