@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@400;500;600;700;800&family=Funnel+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --brand-red:        #B8593C;
  --brand-red-700:    #8F4129;
  --brand-red-100:    #F7E4D9;
  --brand-green:      #2D4A3E;
  --brand-green-700:  #1E3429;
  --brand-green-100:  #E3EBE7;
  --brand-black:      #1A1815;

  --neutral-0:    #FFFFFF;
  --neutral-25:   #FBF8F2;
  --neutral-50:   #F5F1E7;
  --neutral-100:  #ECE6D7;
  --neutral-200:  #DDD5C1;
  --neutral-300:  #C5BCA3;
  --neutral-400:  #918876;
  --neutral-500:  #6A6356;
  --neutral-600:  #4A4438;
  --neutral-700:  #2F2A21;
  --neutral-800:  #1F1A12;
  --neutral-900:  #1A1815;

  --bg:           var(--neutral-50);
  --fg-1:         var(--neutral-900);
  --fg-2:         var(--neutral-700);
  --fg-3:         var(--neutral-500);
  --fg-4:         var(--neutral-400);
  --border:       var(--neutral-200);
  --border-strong:var(--neutral-300);

  --font-display: 'Funnel Display', 'Helvetica Neue', system-ui, sans-serif;
  --font-body:    'Funnel Sans', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.16);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}