/* GOAT UPDATES — design tokens
   Palette rule: no pure black, no pure white, no neon.
   This is a grey box in a laundry room, not a spaceship. */
:root {
  --panel:        #C9C7BE;
  --panel-hi:     #DAD8CF;
  --panel-lo:     #A8A69C;
  --panel-edge:   #8B897F;
  --paper:        #EDE8DC;
  --paper-lo:     #E0D9C8;

  --ink:          #1A1917;
  --ink-soft:     #4A4842;
  --ink-faint:    #7C796F;

  --yellow:       #E8B400;
  --yellow-lo:    #C89A00;
  --red:          #C4271B;
  --red-lo:       #8E1A11;
  --green:        #3D7A44;
  --blue:         #2B3A6B;

  --f-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --f-sans:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --f-hand:    'Permanent Marker', 'Comic Sans MS', cursive;

  --step--2: clamp(.60rem, .58rem + .1vw,  .68rem);
  --step--1: clamp(.72rem, .69rem + .15vw, .82rem);
  --step-0:  clamp(.95rem, .90rem + .25vw, 1.08rem);
  --step-1:  clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.5vw, 3.4rem);
  --step-4:  clamp(2.8rem, 1.8rem + 5vw, 6rem);

  --gut: clamp(1rem, 4vw, 1.75rem);
  --maxw: 40rem;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* Room reserved at the bottom of every screen for the pinned decal.
     Must be >= image height + its padding + its offset, or it covers things.
     Mobile: 118*212/400 = 62.5 + 13 padding + 8 offset = 83.5 */
  --brand-h: 88px;

  --shadow-panel: 0 1px 0 var(--panel-hi) inset, 0 -2px 0 rgba(0,0,0,.16) inset, 0 6px 18px rgba(0,0,0,.22);
  --shadow-plate: 0 2px 0 rgba(0,0,0,.2), 0 10px 26px rgba(0,0,0,.28);
}