/* Auto-layout Playground — design tokens */

:root {
  /* Palette */
  --paper:       #ebe4d6;
  --paper-light: #fffdf8;
  --rust:        #b4451a;
  --header-bg:   #2a251f;
  --text:        #2a251f;
  --text-muted:  #7a6f62;
  --border:      #ccc4b6;

  /* Canvas depth fills */
  --depth-0: #cdc6bc;
  --depth-1: #ddd7ce;
  --depth-2: #eae4d8;
  --depth-3: #f3ede4;

  /* Typography */
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Spacing */
  --gap-xs:  4px;
  --gap-sm:  8px;
  --gap-md: 16px;
  --gap-lg: 24px;

  /* Geometry */
  --radius:    4px;
  --radius-lg: 8px;
}