/* ==========================================================================
   Pavilion — design tokens
   Source of truth: Figma "Pavilion Website – October" › 09-29-26 Build
   (library "Pavilion Colors" + local text styles Desktop/* and Mobile/*)
   ========================================================================== */

/* ---- Fonts (self-hosted, licensed for web via Smuss Type Kiosk EULA) ---- */
@font-face {
  font-family: "STK Bureau Serif";
  src: url("../assets/fonts/STKBureauSerif-Regular.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "STK Bureau Serif";
  src: url("../assets/fonts/STKBureauSerif-Italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "STK Bureau Sans";
  src: url("../assets/fonts/STKBureauSans-Regular.woff2") format("woff2");
  font-weight: 100 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "STK Bureau Sans";
  src: url("../assets/fonts/STKBureauSans-Medium.woff2") format("woff2");
  font-weight: 500 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "STK Bureau Sans SemiMono";
  src: url("../assets/fonts/STKBureauSansSemiMono-Regular.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Better Chill";
  src: url("../assets/fonts/BetterChill.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* ---- Color (Pavilion Colors library) ---- */
  --color-maroon: #380303;          /* Maroon/Maroon — primary ink */
  --color-maroon-dark: #511111;     /* footer wordmark */
  --color-yellow-100: #fffbd5;
  --color-yellow-200: #fef8ac;
  --color-yellow-300: #f6ee97;
  --color-off-white: #fffdf9;       /* Gray/Off-White — page ground */
  --color-white: #ffffff;           /* Gray/True-White */
  --color-gray-100: #f9f8f4;
  --color-gray-200: #edebe6;
  --color-gray-300: #bdbbb4;
  --color-gray-400: #676663;
  --color-black: #111111;           /* Gray/Black */
  --color-purple-200: #d7c2ff;
  --color-purple-300: #c2abef;      /* map: Pavilion states */
  --color-map-hover: #9670e2;       /* map-only hover */
  --color-purple-100: #f1eaff;     /* Homeowners bands */
  --color-blue-100: #f6fbfc;       /* PM form fields */
  --color-blue-200: #d4e9ef;
  --color-blue-300: #badde7;
  --color-slate: #556a70;          /* checklist ticks */
  --color-brown-100: #fff3e2;      /* PM overview band */
  --color-brown-200: #d9c3a4;      /* PM "Top 5" card */
  --color-olive: #705f25;          /* text on yellow cards (job listing) */
  --color-orange-200: #ffb881;
  --color-orange-300: #efa062;

  --text-muted: rgba(17, 17, 17, 0.66);   /* Black @ 66% body copy */
  --stroke-soft: rgba(17, 17, 17, 0.15);  /* nav pill outline, desktop */

  /* ---- Font families ---- */
  --font-serif: "STK Bureau Serif", "STIX Two Text", Georgia, serif;
  --font-sans: "STK Bureau Sans", Inter, system-ui, sans-serif;
  --font-mono: "STK Bureau Sans SemiMono", "IBM Plex Mono", ui-monospace, monospace;
  --font-script: "Better Chill", "League Script", cursive;

  /* ---- Type scale: fluid from Mobile/* (at 402px) to Desktop/* (at 1440px) ----
     clamp(mobile, fluid, desktop). Synced with the Figma library text styles 09-30-26. */
  --fluid: ((100vw - 402px) / 1038);   /* 0px at 402 → 1px at 1440, so "46px + 34 * var(--fluid)" = 46→80 */
  --fs-display: clamp(46px, 46px + 34 * var(--fluid), 80px);
  --fs-h1: clamp(38px, 38px + 34 * var(--fluid), 72px);
  --fs-h2: clamp(34px, 34px + 22 * var(--fluid), 56px);
  --fs-h3: clamp(30px, 30px + 12 * var(--fluid), 42px);
  --fs-h4: clamp(26px, 26px + 10 * var(--fluid), 36px);
  --fs-h45: clamp(24px, 24px + 8 * var(--fluid), 32px);
  --fs-h5: clamp(21px, 21px + 7 * var(--fluid), 28px);
  --fs-quote: clamp(24px, 24px + 8 * var(--fluid), 32px);
  --fs-card-title: clamp(18px, 18px + 5 * var(--fluid), 23px);
  --fs-body-xl: clamp(22px, 22px + 4 * var(--fluid), 26px);   /* Body Very Big */
  --fs-body-lg: clamp(18px, 18px + 4 * var(--fluid), 22px);   /* Body Big */
  --fs-body: clamp(16px, 16px + 2 * var(--fluid), 18px);      /* Body */
  --fs-caption: 14px;
  --fs-label: clamp(12px, 12px + 2 * var(--fluid), 14px);     /* Body UPPERCASE */
  --fs-script: clamp(28px, 28px + 8 * var(--fluid), 36px);

  /* Line heights — Desktop/* values; mobile overrides below (<768px) */
  --lh-display: 1;
  --lh-h1: 1;
  --lh-h2: 1;
  --lh-h3: 1.04;
  --lh-h4: 1.06;
  --lh-h45: 1.08;
  --lh-h5: 1.1;
  --lh-quote: 1.2;
  --lh-card: 1.2;
  --lh-body-xl: 1.2;
  --lh-body-lg: 1.2;
  --lh-body: 1.3;
  --lh-caption: 1.4;
  --lh-label: 1.4;
  --lh-script: 1.2;

  --ls-heading: -0.02em;
  --ls-body: -0.01em;
  --ls-label: 0.1em;

  /* ---- Layout ---- */
  --page-max: 1440px;
  --content-max: 1280px;
  --gutter: clamp(20px, 4px + 5.4vw, 80px);  /* 20 mobile → 80 desktop */
  --section-y: clamp(64px, 40px + 4vw, 128px);

  /* ---- Radius ---- */
  --radius-pill: 999px;
  --radius-card: clamp(16px, 10px + 1.2vw, 30px);
  --radius-tile: clamp(12px, 8px + 0.8vw, 20px);
  --radius-panel: clamp(16px, 14px + 0.4vw, 20px);
}

/* Mobile/* line heights (where they differ from Desktop/*) */
@media (max-width: 767px) {
  :root {
    --lh-display: 0.98;
    --lh-h2: 1.02;
    --lh-h3: 1.05;
    --lh-h4: 1.08;
    --lh-h45: 1.1;
    --lh-h5: 1.15;
    --lh-body-lg: 1.22;
    --lh-caption: 1.38;
  }
}