/* =====================================================================
   TOKENS — fonts, colors, spacing, radii, transitions
   Swap font pairing by changing --font-display and --font-body below.
   ===================================================================== */

/* ===== @font-face — self-hosted WOFF2 ===== */

/* Barlow Condensed (display, pairing 1 — active) */
@font-face {
  font-family: "Barlow Condensed";
  src: url("../assets/fonts/barlow-condensed-v13-latin/barlow-condensed-v13-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../assets/fonts/barlow-condensed-v13-latin/barlow-condensed-v13-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../assets/fonts/barlow-condensed-v13-latin/barlow-condensed-v13-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Lora (body, pairing 1 — active) */
@font-face {
  font-family: "Lora";
  src: url("../assets/fonts/lora-v37-latin/lora-v37-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../assets/fonts/lora-v37-latin/lora-v37-latin-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../assets/fonts/lora-v37-latin/lora-v37-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../assets/fonts/lora-v37-latin/lora-v37-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Oswald (display, pairing 2) */
@font-face {
  font-family: "Oswald";
  src: url("../assets/fonts/oswald-v57-latin/oswald-v57-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("../assets/fonts/oswald-v57-latin/oswald-v57-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("../assets/fonts/oswald-v57-latin/oswald-v57-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Bebas Neue (display, pairing 3) */
@font-face {
  font-family: "Bebas Neue";
  src: url("../assets/fonts/bebas-neue-v16-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Crimson Pro (body, pairing 3) */
@font-face {
  font-family: "Crimson Pro";
  src: url("../assets/fonts/crimson-pro-v28-latin/crimson-pro-v28-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../assets/fonts/crimson-pro-v28-latin/crimson-pro-v28-latin-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../assets/fonts/crimson-pro-v28-latin/crimson-pro-v28-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../assets/fonts/crimson-pro-v28-latin/crimson-pro-v28-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== Custom properties ===== */

:root {
  /* Active font pairing (2: Oswald + Lora — client-selected). Swap both
     lines to change globally. System fallbacks tuned to the metric family. */
  --font-display: "Oswald", "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Lora", "Crimson Pro", Georgia, "Times New Roman", serif;

  /* Color palette */
  --color-primary: #1a5f7a;
  --color-primary-dark: #124558;
  --color-primary-light: #2d8aa8;
  --color-text-on-teal: #ffffff;
  --color-text-body: #1a1a1a;
  --color-text-muted: #6b6b6b;
  --color-surface: #ffffff;
  --color-surface-alt: #f5f5f5;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-on-teal: rgba(255, 255, 255, 0.35);
  --color-accent-warm: #E8B547;          /* warm gold — hover accents + focus ring */
  --color-focus: var(--color-accent-warm);

  /* Fluid type scale */
  --fs-body: clamp(16px, 1rem + 0.25vw, 18px);
  --fs-body-lg: clamp(18px, 1.05rem + 0.4vw, 22px);
  --fs-small: 0.875rem;
  --fs-h1: clamp(48px, 4rem + 3vw, 120px);
  --fs-h2: clamp(32px, 2rem + 2.5vw, 64px);
  --fs-h3: clamp(24px, 1.5rem + 1vw, 36px);
  --fs-h4: clamp(20px, 1.25rem + 0.5vw, 26px);

  /* Spacing scale — 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section-y: clamp(3rem, 8vw, 6rem);

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-med: 200ms ease;

  /* Elevation — flat design, reserved for accessible focus only */
  --focus-ring: 0 0 0 3px var(--color-focus);
}