/*
  VARIABLES & RESET
  -----------------
*/

:root {
  /* Colors */
  --cream: #F3E9DC;
  --cream-light: #FAF4EA;
  --card: #FBF6EE;
  --sand: #E6D7C3;
  --ink: #1E2A27;
  --ink-soft: #3C4A46;
  --line: rgba(30, 42, 39, 0.14);
  --terracotta: #c5754a;
  --peach: #E8B48C;
  --teal: #4e796e;
  --dark-bg: #232f28;

  /* Fonts */
  --font-serif: 'Fraunces', serif;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Shared layout values */
  --page-width: 1280px;
  --page-padding: 48px;
}

/* Basic reset ------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

img {
  max-width: 100%;
  display: block;
}

::selection {
  background: var(--terracotta);
  color: var(--cream-light);
}

/* Page container used by every section ------------------------------ */
.wrap {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--page-padding);
}