/* ==========================================================================
   theme.css — every colour, font and size the site uses lives here.
   Re-skin the whole site by editing this file only.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=IBM+Plex+Mono:ital,wght@0,400;0,600;1,400&display=swap");

:root {
  /* --- palette ---------------------------------------------------------- */
  --void:        #000000;  /* outside the panel, behind the snow */
  --panel:       #100c08;  /* content panel */
  --panel-raise: #1a130c;  /* code chips, callouts, inputs */
  --rule:        #33241a;  /* dividers and borders */

  --orange:      #ff8f1f;  /* links, headings accents, title */
  --orange-hi:   #ffb866;  /* hover / focus */
  --orange-lo:   #9c4f0c;  /* panel edge, muted accents */

  --beige:       #ecdcbc;  /* headings, strong text */
  --text:        #cfc0a2;  /* body copy */
  --muted:       #8a7a62;  /* captions, meta */

  --ok:          #b9d27a;
  --bad:         #ff6b4a;

  /* snow */
  --flake-far:   #8a7a62;
  --flake-mid:   #cfc0a2;
  --flake-near:  #fff3dc;
  --horizon-glow: rgba(255, 143, 31, .10);

  /* --- type ------------------------------------------------------------- */
  --font-display: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", Consolas, monospace;
  --font-body: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", Consolas, monospace;

  --step--1: 0.85rem;
  --step-0:  1rem;
  --step-1:  1.25rem;
  --step-2:  1.6rem;
  --step-3:  2rem;
  --step-title: clamp(2.8rem, 9vw, 4.75rem);

  /* --- layout ----------------------------------------------------------- */
  --panel-width: 52rem;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --radius: 3px;

  color-scheme: dark;
}