@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap");

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

html,
body {
  scroll-behavior: smooth;
}
body {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--color-text-mid);
  background-color: var(--color-bg);
  min-height: 100vh;
  overflow-x: hidden;
}

main {
  max-width: 1445px;
  margin: 0 auto;
  overflow: hidden;
}

input,
button,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
}
h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}
h3 {
  font-size: var(--fs-lg);
}
h4 {
  font-size: var(--fs-md);
}

p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-text-light);
}

button:active {
  opacity: 0.8;
}

:root {
  /* ── COLORS ── */
  --color-bg: #fffaf7;
  --color-surface: #fff4ee;
  --color-accent: #d4878a;
  --color-accent-dark: #b86b6e;
  --color-text-dark: #2c1a1a;
  --color-text-mid: #6b4c4c;
  --color-text-light: #a68080;
  --color-border: #edd9d0;

  /* ── FONT FAMILIES ── */
  --font-heading: "DM Serif Display", serif;
  --font-body: "DM Sans", sans-serif;

  /* ── FONT SIZES ── */
  --fs-xs: clamp(
    0.625rem,
    1.5vw,
    0.75rem
  ); /* 10px → 12px — labels, tags, fine print */
  --fs-sm: clamp(
    0.75rem,
    2vw,
    0.875rem
  ); /* 12px → 14px — captions, secondary info */
  --fs-base: clamp(0.875rem, 2.5vw, 1rem); /* 14px → 16px — body paragraphs */
  --fs-md: clamp(
    1rem,
    3vw,
    1.125rem
  ); /* 16px → 18px — large body, intro text */
  --fs-lg: clamp(1.125rem, 4vw, 1.5rem); /* 18px → 24px — section subheadings */
  --fs-xl: clamp(1.25rem, 5vw, 2rem); /* 20px → 32px — section headings */
  --fs-2xl: clamp(1.5rem, 6vw, 2.75rem);
  --fs-3xl: clamp(1.9rem, 8vw, 3.5rem);

  --fs-4xl: clamp(2.75rem, 8vw, 3.75rem);

  /* ── FONT WEIGHTS ── */
  --fw-light: 300; /* DM Sans light — subtle body text */
  --fw-regular: 400; /* both fonts — standard body */
  --fw-medium: 500; /* DM Sans — nav links, labels */
  --fw-semibold: 600; /* Playfair — section headings */
  --fw-bold: 700; /* Playfair — hero heading, emphasis */

  /* ── SPACING ── */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;

  /* ── SIZING ── */
  --size-xs: clamp(
    1.5rem,
    3vw,
    2rem
  ); /* 24px → 32px — icon sizes, small elements */
  --size-sm: clamp(2rem, 5vw, 3rem); /* 32px → 48px — avatar, small images */
  --size-md: clamp(
    3rem,
    8vw,
    5rem
  ); /* 48px → 80px — medium images, buttons height */
  --size-lg: clamp(5rem, 12vw, 8rem); /* 80px → 128px — large images */
  --size-xl: clamp(8rem, 20vw, 14rem); /* 128px → 224px — hero image */

  /* ── MISC ── */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 30px; /* pill buttons */
  --shadow: 0 4px 24px rgba(44, 26, 26, 0.08);

  /* SHADOWS */
  --shadow-soft:
    0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 10px -2px rgba(0, 0, 0, 0.02);
  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}