/* Clayabouts interface tokens: Warm Handmade (decision 10).
   These cover the interface only. The world's look comes from the carried clay code. */
:root {
  --color-50: #f7f4ed;
  --color-100: #eee7d8;
  --color-200: #dcc9a5;
  --color-300: #c4a574;
  --color-400: #9c7f4f;
  --color-500: #6b5538;
  --color-600: #4a3b28;
  --color-700: #33281b;
  --color-800: #211a12;
  --color-900: #13100a;

  --accent-berry: #7c2d12;
  --accent-sage: #5f7c3e;
  --accent-dusty-blue: #4a6978;

  --font-headline: 'Fraunces', Georgia, serif;
  --font-body: 'Spectral', Georgia, serif;
  --font-mono: 'Cascadia Mono', ui-monospace, monospace;

  --text-xs: 13px;
  --text-sm: 15px;
  --text-base: 17px;
  --text-lg: 22px;
  --text-xl: 30px;
  --text-2xl: 46px;
  --text-3xl: 46px;
  --leading-body: 1.65;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 18px;
  --space-5: 26px;
  --space-6: 38px;
  --space-7: 56px;
  --space-8: 84px;
  --space-9: 120px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-panel: 14px 22px 16px 22px;
  --radius-button: 14px 8px 14px 8px;

  --shadow-1: 0 1px 3px rgba(107, 85, 56, .08);
  --shadow-2: 0 3px 10px rgba(107, 85, 56, .10);
  --shadow-3: 0 8px 20px rgba(107, 85, 56, .12);
  --shadow-4: 0 14px 32px rgba(107, 85, 56, .14);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 440ms;
}