/* The Beach Way: Design Tokens */

:root {
  --color-white: #FAF8F5;
  --color-black: #1A1714;
  --color-brand: #009FE3;
  --color-brand-dark: #007BBD;
  --color-ember: #C45C26;
  --color-ember-light: #E8845A;
  --color-sand: #E8E0D4;
  --color-sand-dark: #D4C9B8;
  --color-ink: #2C2824;
  --color-muted: #6B6560;
  --color-muted-light: #9A948C;
  --color-green: #63B670;
  --color-teal: #77CDCE;

  --font-display: 'Space Grotesk', -apple-system, system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --font-hand: 'Caveat', cursive;

  --container-max: 1200px;
  --container-narrow: 720px;
  --container-handbook: 880px;
  --container-handbook-wide: 960px;
  --container-prose: 640px;
  --container-pad: 24px;

  --sidebar-width: 280px;
  --nav-height: 64px;

  --radius: 8px;
  --radius-lg: 16px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}