@font-face {
  font-family: "P22 Mackinac";
  src: url("../fonts/p22-mackinac-medium.otf") format("opentype");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --font-display: "P22 Mackinac", Georgia, serif;
  --font-body: "Nunito", Arial, sans-serif;

  --ink: #2c231e;
  --ink-soft: #594e47;
  --canvas: #f7f6f0;
  --white: #ffffff;
  --caramel: #d19060;
  --caramel-hover: #be8153;
  --gold: #e9bb73;
  --pale-gold: #fcd38d;
  --peach: #d69985;
  --rose: #d9ad99;
  --navy: #004c6c;
  --navy-deep: #003d57;
  --beige: #e7dfd4;
  --blush: #f4eadc;
  --cream-text: #f4eee5;
  --neutral: #f2f0e4;
  --line: rgba(44, 35, 30, 0.15);
  --line-light: rgba(255, 255, 255, 0.22);
  --focus: #006e99;

  --container: 1280px;
  --editorial: 1180px;
  --gutter: 40px;
  --section-space: clamp(76px, 10vw, 144px);

  --radius-sm: 12px;
  --radius-card: 16px;
  --radius-lg: 32px;
  --radius-hero: 56px;
  --radius-pill: 999px;

  --shadow-soft: 0 18px 50px rgba(44, 35, 30, 0.1);
  --shadow-card: 0 14px 36px rgba(44, 35, 30, 0.08);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-height: 90px;
}

@media (max-width: 1024px) {
  :root {
    --gutter: 20px;
    --section-space: clamp(64px, 9vw, 100px);
    --radius-hero: 40px;
  }
}

@media (max-width: 560px) {
  :root {
    --gutter: 16px;
    --section-space: 64px;
    --radius-hero: 28px;
    --header-height: 76px;
  }
}