/* Design tokens: change colours, fonts and sizes here.
   Every other stylesheet uses these variables instead of raw values
   (`npm run lint` checks it). */

@font-face {
  font-family: "Hanken Grotesk";
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
}
@font-face {
  font-family: "HM Script";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/hm-script-regular.woff2") format("woff2");
}
@font-face {
  font-family: "HM Script";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/hm-script-bold.woff2") format("woff2");
}
@font-face {
  font-family: "HM Caps";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/hm-caps.woff2") format("woff2");
}
@font-face {
  font-family: "HM Outline";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/hm-outline.woff2") format("woff2");
}

:root {
  /* ---------- Colours ---------- */

  --brown: #4f2716; /* brand: text, footer, notice, scrolled header */
  --brown-light: #7b3716; /* taglines, captions, button hover */
  --coral: #e0685e; /* accents, links on hover */
  --cream: #fffdf1; /* page background */
  --line: #e6d6c4; /* table rules */
  --cream-muted: color-mix(in srgb, var(--cream) 80%, transparent); /* secondary text on brown */
  --cream-faint: color-mix(in srgb, var(--cream) 55%, transparent); /* outlines on brown */

  --shadow-header: 0 8px 20px color-mix(in srgb, var(--brown) 35%, transparent);
  --shadow-image: 0 16px 40px color-mix(in srgb, var(--brown) 12%, transparent);

  /* ---------- Spacing: multiples of 4px, --space-N = N × 4px ---------- */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;

  /* ---------- Typography ---------- */

  --font-body: "Hanken Grotesk", Helvetica, Arial, sans-serif;
  --font-caps: "HM Caps", sans-serif;
  --font-script: "HM Script", cursive;
  --font-outline: "HM Outline", cursive;

  /* In rem so text follows the visitor's browser font size (1rem = 16px by default). */
  --text-xs: 0.875rem; /* 14px */
  --text-sm: 1rem; /* 16px */
  --text-md: 1.125rem; /* 18px: body text */
  --text-lg: 1.25rem; /* 20px */
  --text-xl: 1.5rem; /* 24px */
  --text-2xl: 2rem; /* 32px */
  --text-3xl: 2.5rem; /* 40px */

  /* Fluid sizes for headings: smallest on phones, largest from ~1280px wide. */
  --text-tagline: clamp(1.125rem, 2.2vw, 1.75rem); /* 18 → 28px */
  --text-script: clamp(1.75rem, 3.2vw, 2.5rem); /* 28 → 40px: script subtitles */
  --text-h2: clamp(2rem, 4vw, 3rem); /* 32 → 48px */
  --text-h1: clamp(2.5rem, 5vw, 4rem); /* 40 → 64px */
  --text-hero: clamp(2.5rem, 7vw, 6.25rem); /* 40 → 100px */

  --leading-none: 1; /* display headlines */
  --leading-tight: 1.1; /* headings */
  --leading-snug: 1.25; /* script text, short lines */
  --leading-normal: 1.5; /* UI text, captions */
  --leading-relaxed: 1.7; /* paragraphs */

  /* ---------- Shapes and motion ---------- */

  --radius-pill: 1000px; /* anything taller than the element: fully round ends */

  --ease: 0.3s ease; /* header changes on scroll */
  --ease-fast: 0.15s ease; /* hover */

  /* ---------- Layout ---------- */

  --gutter: var(--space-8);
  --container: 1240px;
  /* Mobile breakpoint is 760px, plus 22.5em (360px) for the two-row header.
     Media queries can't read variables, so they're written out in
     header.njk, layout.css and components.css. */

  /* Header bar height = padding + tallest item. See layout.css. */
  --header-height: 88px; /* 16 + 56 + 16 */
}

@media (max-width: 760px) {
  :root {
    --gutter: var(--space-5);
    --header-height: 64px; /* 12 + 40 + 12 */
  }
}

@media (width < 22.5em) {
  :root {
    --header-height: 112px; /* 12 + 40 + 8 + 40 + 12: two rows */
  }
}