@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Quicksand:wght@500;600;700&display=swap');

:root {

  --bg-cream-canvas: #FAF6EA;
  --bg-cream-card: #FFFDF7;
  --bg-cream-warm: #FFF9ED;
  --bg-cream-deep: #F3ECE0;
  --bg-cream-border: #E5DCC9;
  --bg-cream-alt: #EFE8D6;

  --green-primary: #8FBF7F;
  --green-hover: #7DAE6D;
  --green-light: #EBF5E9;
  --green-light-hover: #DFEEDC;
  --green-border: #80B171;
  --green-shadow: #669757;
  --green-dark: #3E6634;
  --green-darker: #294423;

  --ink-title: #203020;
  --ink-body: #384A38;
  --ink-muted: #5D725D;
  --ink-faint: #8A9D8A;
  --ink-inverse: #FFFDF7;

  --torch-orange: #E67E22;
  --torch-amber: #EAA33E;
  --torch-light: #FEF6EB;
  --torch-glow: rgba(234, 163, 62, 0.22);
  --torch-shadow: #C4791E;

  --stone-dark: #3C4A57;
  --stone-mid: #607274;
  --stone-light: #BDC7C8;
  --stone-soft: #EEF2F2;

  --stitch-color: #DCD2BD;
  --stitch-sage: #BBD5B4;

  --font-display: 'Fredoka', cursive, sans-serif;
  --font-body: 'Quicksand', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 5px rgba(32, 48, 32, 0.06);
  --shadow-md: 0 6px 16px rgba(32, 48, 32, 0.08);
  --shadow-lg: 0 14px 30px rgba(32, 48, 32, 0.1);
  --shadow-card: 0 4px 0 var(--bg-cream-border), 0 8px 20px rgba(32, 48, 32, 0.06);
  --shadow-btn-green: 0 5px 0 var(--green-shadow), 0 8px 16px rgba(102, 151, 87, 0.22);
  --shadow-btn-cream: 0 5px 0 var(--bg-cream-border), 0 8px 16px rgba(32, 48, 32, 0.08);

  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
  --trans-quick: 150ms var(--ease-smooth);
  --trans-normal: 250ms var(--ease-smooth);
  --trans-bounce: 300ms var(--ease-bounce);

  --container-max: 1260px;
  --container-narrow: 1020px;
}