/* -----------------------------------------------------------------------
   Design tokens — mirrors the Figma variables of the NODIR design file.
   Change a value here and it propagates through the whole theme.
   ----------------------------------------------------------------------- */

@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/bebas-neue-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour ------------------------------------------------------------- */
  --color-primary: #e91f26;
  --color-primary-dark: #c4161c;
  --color-black: #020723;
  --color-black-60: #061632;
  --color-white: #fff;
  --color-gray-5: #f4f4f4;
  --color-gray-15: #ececec;
  --color-gray-60: #999898;
  --color-navy: #04152e; /* highlights bar */

  --color-text: var(--color-black);
  --color-text-muted: var(--color-gray-60);
  --color-surface: var(--color-white);
  --color-surface-alt: var(--color-gray-5);

  /* Type --------------------------------------------------------------- */
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", roboto, sans-serif;

  /* Figma sizes are the upper bound; they scale down on narrow screens. */
  --fs-h1: clamp(2.5rem, 1.55rem + 3.2vw, 4.25rem); /* 40 → 68 */
  --fs-h2: clamp(1.75rem, 1.35rem + 1.35vw, 2.5rem); /* 28 → 40 */
  --fs-h3: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem); /* 20 → 24 */
  --fs-h5: clamp(1.5rem, 1.23rem + 0.9vw, 2rem); /* 24 → 32 */
  --fs-main: clamp(1rem, 0.956rem + 0.188vw, 1.125rem); /* 16 @375 → 18 @1440 */
  --fs-secondary: 1rem; /* 16 */
  --fs-small: 0.875rem; /* 14 */

  /* Bebas is set at its own leading in the design — 82 over 68, 48 over 40. */
  --lh-display: 1.2;
  --lh-heading: 1.2;
  --lh-body: 1.5;

  /* Spacing ------------------------------------------------------------ */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-44: 2.75rem;
  --space-56: 3.5rem;
  --space-80: 5rem;

  /* Section rhythm shrinks on small screens. */
  --section-gap: clamp(3rem, 1.5rem + 5vw, 6rem);

  /* Layout ------------------------------------------------------------- */
  /*
	 * The design lays out on a 1440 page inset 56 each side, so content is 1328.
	 * The inset is tuned to land on 16 at 375 and on 56 at 1440 exactly, rather
	 * than merely approaching them.
	 */
  --container-max: 90rem; /* 1440 */
  --container-pad: clamp(
    1rem,
    0.12rem + 3.76vw,
    3.5rem
  ); /* 16 @375 → 56 @1440 */
  --content-max: 83rem; /* 1328 */

  /* Shape -------------------------------------------------------------- */
  --radius-pill: 2rem; /* 32 — header bar, footer top corners */
  --radius-panel: 1.5rem; /* 24 — top corners of full-bleed panels */
  --radius-button: 1.5rem; /* 24 */
  --radius-card: 1rem; /* 16 */
  --radius-box: 0.75rem; /* 12 — fields, the map, gallery photos and filter */
  --radius-full: 999px;

  --shadow-floating: 0 0.5rem 1.5rem rgb(2 7 35 / 12%);
  --shadow-raised: 0 0.25rem 1rem rgb(2 7 35 / 8%);

  /* Motion ------------------------------------------------------------- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;

  /* Stacking ----------------------------------------------------------- */
  --z-header: 100;
  --z-chat: 200;
  --z-overlay: 300;
  --z-lightbox: 400;
}