:root {
  --paper: #f5f0ea;
  --surface: #fff8ef;
  --ink: #1f0f2d;
  --muted: #4d355d;

  /* OG */
  /* --primary: #663790;
  --accent: #4a1f64;
  --signal: #c62838;
  --accent-2: #f5a524;
  --primary-text: #663790;
  --secondary-text: #663790;

  --primary-text-content: #663790;
  --line: #663790;
  
  --ink-accent: #a6192a;
  --hero-bg: #f5a524;
  --hero-text: #f1492f;
  --hero-shadow: #663790; */

  --primary: #663790;
  --accent: #4a1f64;
  --signal: #D24343;
  --accent-2: #f2a047;
  --primary-text: #663790;
  --secondary-text: #663790;

  --primary-text-content: #663790;
  --line: #663790;
  
  --ink-accent: #D24343;
  --hero-bg: #f2a047;
  --hero-text: #f1492f;
  --hero-shadow: #663790;  
  

  /* --primary: #f2a047; 
  --accent: #4a1f64;
  --signal: #D24343;
  --accent-2: #F15555; 
  --primary-text: #f2a047; 
  --secondary-text: #f2a047; 

  --primary-text-content: #f2a047;
  --line: #f2a047;
  --hero-bg: #f5f0ea;

  --hero-text: #F15555;
  --hero-shadow: #f2a047;    
  */

  --offset-shadow: var(--ink);
  --shadow-sm: 6px 6px 0 var(--offset-shadow);
  --shadow: 12px 12px 0 var(--offset-shadow);
  --shadow-lg: 18px 18px 0 var(--offset-shadow);
  --content-max: 1240px;
  --page-gutter: clamp(18px, 7vw, 120px);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: "Space Grotesk", "Manrope", "Helvetica Neue", Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 18px;
  letter-spacing: -0.01em;
}

a {
  color: inherit;
  text-decoration: none;
}