/* Poppins — self-hosted, latin subset only (weights actually used in the design) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins/poppins-normal-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins/poppins-italic-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins/poppins-normal-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins/poppins-normal-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins/poppins-normal-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/poppins/poppins-normal-800.woff2') format('woff2');
}

:root {
  /* Color system, taken directly from the design */
  --color-bg: #FBF7F2;
  --color-text: #2E3A3C;
  --color-text-muted: #55676A;
  --color-primary: #4FA6A4;
  --color-primary-dark: #3E8F8D;
  --color-primary-pale: #EAF5F4;
  --color-primary-soft: #9CCFCF;
  --color-pink: #D97D9B;
  --color-pink-pale: #FDEFF3;
  --color-pink-text: #4F3A41;
  --color-gold: #F6CE6B;
  --color-gold-pale: #FDF4E3;
  --color-gold-text: #514631;
  --color-gold-text-muted: #C9A03F;
  --color-dark: #2E3A3C;
  --color-dark-text: #FBF7F2;
  --color-dark-text-muted: #C3D2D3;
  --color-border: #EDE4DA;
  --color-cream-alt: #F3EEE8;
  --color-teal-muted: #7C9B99;

  /* Type */
  --font-family: 'Poppins', system-ui, sans-serif;

  /* Radii */
  --radius-lg: 40px;
  --radius-md: 32px;
  --radius-sm: 28px;
  --radius-pill: 999px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; width: 100%; }

body {
  margin: 0;
  width: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; }

a { color: var(--color-text); text-decoration: none; }
a:hover { color: var(--color-primary); }

p { text-wrap: pretty; margin: 0; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  letter-spacing: -0.02em;
}

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

button { font-family: inherit; }

@keyframes twinkle {
  0%, 100% { opacity: .25; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1); }
}