/* Quattro Tech design tokens. Source of truth: DESIGN_CONTRACT.md sections 4 to 6. */

@font-face {
  font-family: "Playfair Display";
  src: url("../assets/fonts/PlayfairDisplay-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/fonts/PlayfairDisplay-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/Figtree-normal.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/Figtree-italic.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* colour */
  --forest: #1b3d2c;
  --forest-900: #0f241a;
  --forest-700: #234a37;
  --sage: #6f9483;
  --mist: #a9c2b6;
  --pool: #1e8c86;
  --pool-deep: #0b4440;
  --ivory: #f4efe4;
  --paper: #fbf8f1;
  --silver: #e9edef;
  --silver-2: #b8c0c5;
  --signal: #e8692f;
  --signal-ink: #b8471c;
  --slate: #69737a;
  --ink: #12261c;

  --hair-dark: rgba(255, 255, 255, 0.18);
  --hair-light: rgba(27, 61, 44, 0.14);
  --glass: rgba(255, 255, 255, 0.12);
  --glass-line: rgba(255, 255, 255, 0.2);

  /* type */
  --serif: "Playfair Display", "Times New Roman", serif;
  --sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero: clamp(64px, 8.3vw, 150px);
  --fs-h2: clamp(34px, 3.6vw, 56px);
  --fs-h3: clamp(19px, 1.5vw, 22px);
  --fs-body: 15px;
  --fs-long: 17px;
  --fs-label: 12.5px;

  /* layout */
  --gutter: clamp(20px, 2.65vw, 44px);
  --section-y: clamp(72px, 9vw, 140px);
  --radius-card: 22px;
  --radius-well: 12px;
  --radius-tag: 8px;
  --nav-h: 76px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.87, 0, 0.13, 1);
}

@media (max-width: 820px) {
  :root {
    --fs-body: 15px;
    --fs-long: 16px;
    --nav-h: 64px;
  }
}