/* Charmed Homes: design tokens (see /DESIGN.md for the full system) */

@font-face {
  font-family: "Palmore Semi Bold";
  src: url("../fonts/Palmore-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Century Gothic Pro";
  src: url("../fonts/CenturyGothicPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Century Gothic Pro";
  src: url("../fonts/CenturyGothicPro-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Century Gothic Pro";
  src: url("../fonts/CenturyGothicPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Century Gothic Pro";
  src: url("../fonts/CenturyGothicPro-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Colors: Pantone 4975 C / 284 C / 2003 C / 677 C, converted per brand kit */
  --charmed-maroon: #3f2021;
  --charmed-maroon-rgb: 63, 32, 33;
  --prescott-blue: #6cace4;
  --cottage-yellow: #f9e267;
  --blush: #e5cedb;
  --paper: #ffffff;
  --ink: var(--charmed-maroon);
  --error: #961a14;

  /* Typography */
  --font-display: "Palmore Semi Bold", serif;
  --font-body: "Century Gothic Pro", "Century Gothic", sans-serif;

  --size-display: clamp(2.75rem, 6vw, 5.5rem);
  --size-headline: clamp(1.85rem, 3.2vw, 2.75rem);
  --size-title: clamp(1.15rem, 1.4vw, 1.375rem);
  --size-body: 1.0625rem;
  --size-label: 0.8125rem;

  --leading-display: 0.97;
  --leading-headline: 1.05;
  --leading-title: 1.3;
  --leading-body: 1.6;
  --leading-label: 1.2;

  --tracking-display: -0.01em;
  --tracking-headline: -0.005em;
  --tracking-label: 0.08em;

  /* Radius: sharp, architectural */
  --radius-none: 0px;
  --radius-sm: 2px;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 96px;
  --space-2xl: 160px;

  /* Motion */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast: 0.2s;
  --duration-reveal: 0.6s;

  /* Layout */
  --measure: 68ch;
  --content-width: 1200px;

  /* z-index scale */
  --z-sticky: 100;
  --z-mobile-nav: 200;
  --z-toast: 300;
}