/* Design tokens + self-hosted fonts.
   Values extracted from "Heavenly Outdoor.fig" (1920px design canvas). */

@font-face {
  font-family: "Fahkwang";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/fahkwang-400.woff2") format("woff2");
}
@font-face {
  font-family: "Fahkwang";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/fahkwang-500.woff2") format("woff2");
}
@font-face {
  font-family: "Fahkwang";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/fahkwang-600.woff2") format("woff2");
}
@font-face {
  font-family: "Fahkwang";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/fahkwang-700.woff2") format("woff2");
}
/* Google Sans Flex is a variable font; one file covers 400 and 500. */
@font-face {
  font-family: "Google Sans Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../assets/fonts/google-sans-flex-latin.woff2") format("woff2");
}

:root {
  /* Colour */
  --navy: #0c141d;
  --teal: #1f8ead;
  --teal-50: #eff9fb;
  --teal-200: #c2d8de;
  --surface: #f2f6f7;
  --border: #e7e6e3;
  --border-cool: #edf3fa;
  --text: #0c141d;
  --text-muted: #4d5266;
  --text-on-dark-muted: #9ca3af;
  --white: #ffffff;
  --star: #ff9c11;

  /* Typography */
  --font-display: "Fahkwang", Georgia, "Times New Roman", serif;
  --font-body: "Google Sans Flex", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --fs-h1: clamp(2rem, 1.2rem + 3.4vw, 4rem);        /* 64 */
  --fs-h2: clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem);      /* 40 */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);      /* 24 */
  --fs-lead: clamp(1rem, 0.94rem + 0.3vw, 1.25rem);     /* 20 */
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);    /* 18 */

  /* Layout */
  --container-max: 1524px;
  --gutter: clamp(20px, 4.2vw, 48px);
  --container-w: min(100vw - 2 * var(--gutter), var(--container-max));
  --section-space: clamp(72px, 19.5vw, 150px);     /* 150 from 768px up: gap between sections */
  --space-heading: clamp(32px, 3.125vw, 60px);        /* 60: heading -> content */
  --space-dark: clamp(56px, 6.25vw, 120px);           /* 120: padding inside dark sections */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 200ms;
  --t-med: 400ms;
}