/*
 * Fakkeltocht redesign — design tokens
 * Palette, type scale and layout metrics measured from the designer's mockup
 * (tmp/website design.pdf — a 2x FireShot capture of a 1451px-wide artboard, so
 * every measurement below is "PDF pixels / 2" = CSS pixels at a 1451px viewport).
 */

/* ---- Fonts ------------------------------------------------------------
 * LOCAL-DEV placeholders. Blender Pro / Peridot need a WEB license before
 * prod (see assets/fonts/README.md). Convert to woff2 for prod.
 * Lexend is free (OFL) — add its file and uncomment its @font-face.
 */
@font-face {
  font-family: "Blender Pro";
  src: url("../fonts/BlenderPro-Heavy.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Peridot Devanagari";
  src: url("../fonts/PeridotDevanagari-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
/* @font-face {
  font-family: "Lexend";
  src: url("../fonts/Lexend-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
} */

:root {
  /* ---- Colour — sampled from the mockup ----
   * Earlier values were eyeballed approximations; these are pixel samples:
   * hero/base #1d1d1b, band + eyecatcher #e8511c, deep text box #ce3818. */
  --ft-bg-dark: #1d1d1b;      /* hero / base background */
  --ft-orange: #e8511c;       /* brand orange — band, eyecatcher, nav, accents */
  --ft-orange-deep: #ce3818;  /* text box on the orange band + band top lip */
  --ft-white: #ffffff;
  --ft-orange-light: #f9d4ba; /* light apricot — sponsor/partner cards on the dark
                               surface (white glared against the black) */
  --ft-text-muted: #e8e8e8;   /* body copy on dark — brighter than the mockup's
                               #d0d0d0 for legibility of the Light body face */

  /* ---- Blueprint dot-grid ----
   * The mockup draws thin light rules with a brighter node dot at every
   * intersection, ~267 x 178 CSS px cells, on BOTH the dark and orange
   * surfaces. Drawn with CSS gradients (see .ft-grid-overlay) rather than a
   * tiled SVG, so the same rules recolour per surface via these tokens. */
  --ft-grid-line: rgba(255, 255, 255, .22);
  --ft-grid-dot:  rgba(255, 255, 255, .5);
  --ft-grid-cell-x: 267px;
  --ft-grid-cell-y: 178px;
  --ft-grid-dot-size: 2.5px;

  /* ---- Layout ----
   * The mockup is near full-bleed: content sits 78px from the edge of a 1451px
   * artboard = 5.35% gutters. Brando's Bootstrap `.container` is a fixed
   * 1170px, which is far too narrow, so redesigned pages override it with this
   * fluid width (capped so it stops growing on very wide screens).
   * --ft-gutter is the space left outside the container; elements that bleed to
   * the viewport edge (the hero eyecatcher) cancel it with a negative margin. */
  --ft-container: min(1560px, 89.3vw);
  --ft-gutter: calc((100vw - var(--ft-container)) / 2);
  /* Distance from the edge of a WPBakery column to the edge of the viewport:
   * the gutter outside the container PLUS Bootstrap's 15px container padding.
   * This is what a full-bleed element inside a column has to span. */
  --ft-bleed: calc(var(--ft-gutter) + 15px);

  /* ---- Type ---- */
  --ft-font-display: "Blender Pro", "Arial Narrow", sans-serif; /* titles / eyecatchers */
  --ft-font-body: "Peridot Devanagari", system-ui, sans-serif;  /* body text */
  --ft-font-logo: "Lexend", system-ui, sans-serif;              /* logo wordmark */

  /* Sizes are vw-based so they hold the mockup's proportions, clamped so they
   * stay readable on phones and stop growing past the artboard width.
   * Mockup @1451px: body 20px, h1 51px, eyecatcher 64px, its meta lines 44px.
   * Bounds are in PIXELS on purpose: Brando sets `html { font-size: 10px }`, so
   * a rem-based upper bound would silently clamp everything to ~12px. */
  --ft-size-body:     clamp(18px, 1.45vw, 21px);  /* +2px floor vs mockup: legibility */
  --ft-size-h1:       clamp(34px, 3.55vw, 52px);
  --ft-size-h2:       clamp(26px, 2.5vw,  38px);
  --ft-size-eyebrow:  clamp(34px, 4.4vw,  64px);  /* eyecatcher headline */
  --ft-size-eyemeta:  clamp(24px, 3.03vw, 44px);  /* eyecatcher date/place */
  --ft-size-nav:      clamp(15px, 1.38vw, 20px);
  --ft-lh-body: 1.55;
}