/* GENERATED FILE — DO NOT EDIT.
   Copied from ../../brand/brand-tokens.css by sync-brand.sh.
   Edit the source and re-run ./sync-brand.sh. */
/* Jou Nuwe Begin (JNB) — brand tokens v1.0.0
 * Locked 2026-07-28 from `jnb-brand-guide-v1.0.pdf` (Julie 2026).
 * Colour values were pixel-sampled from the official Krugersdorp poster and the JNB logo set.
 *
 * Build artifacts reference these custom properties. Never hard-code a hex or a font name.
 * Machine-readable twin: brand-tokens.json
 */

:root {
  /* ---- Colour ------------------------------------------------------------
   * Five values. Only tints and shades of these may be derived — never a new hue. */
  --jnb-canvas:      #182430; /* Deep Navy-Slate — the base canvas */
  --jnb-navy:        #061B3C; /* Brand Navy — logo panels, lockups on light */
  --jnb-white:       #FFFFFF; /* Text on dark, and the city pill */
  --jnb-gold:        #F8C870; /* The only accent. <=10% of any layout */
  --jnb-near-black:  #0E1620; /* Depth: footers, overlays, city-pill text */

  /* Semantic aliases */
  --jnb-bg:          var(--jnb-canvas);
  --jnb-text:        var(--jnb-white);
  --jnb-text-muted:  color-mix(in srgb, var(--jnb-white) 72%, transparent);
  --jnb-accent:      var(--jnb-gold);
  --jnb-surface:     var(--jnb-navy);
  --jnb-hairline:    color-mix(in srgb, var(--jnb-white) 14%, transparent);

  /* The approved background treatment, taken from the poster */
  --jnb-canvas-gradient: linear-gradient(180deg, #182430 0%, #1B2533 100%);

  /* Scrim over photography. Text on a photo ALWAYS requires this. */
  --jnb-scrim:        color-mix(in srgb, var(--jnb-canvas) 70%, transparent);
  --jnb-scrim-strong: color-mix(in srgb, var(--jnb-canvas) 80%, transparent);
  --jnb-scrim-soft:   color-mix(in srgb, var(--jnb-canvas) 60%, transparent);

  /* ---- Type -------------------------------------------------------------- */
  --jnb-font-display: "Anton", "Oswald", "Arial Narrow", sans-serif;
  --jnb-font-body:    "Poppins", "Inter", system-ui, sans-serif;

  --jnb-display-tracking: 0.01em;

  /* Scale — mobile first. Desktop values applied at the 768px breakpoint below.
   * Body never drops below 16px: a meaningful share of this audience is older. */
  --jnb-size-display-xl: 44px;  --jnb-lh-display-xl: 0.98; --jnb-tr-display-xl: 0.01em;
  --jnb-size-display:    32px;  --jnb-lh-display:    1.02; --jnb-tr-display:    0.01em;
  --jnb-size-h1:         26px;  --jnb-lh-h1:         1.1;  --jnb-tr-h1:         0.02em;
  --jnb-size-h2:         20px;  --jnb-lh-h2:         1.3;  --jnb-tr-h2:         0;
  --jnb-size-body-lg:    18px;  --jnb-lh-body-lg:    1.65; --jnb-tr-body-lg:    0;
  --jnb-size-body:       16px;  --jnb-lh-body:       1.6;  --jnb-tr-body:       0;
  --jnb-size-caption:    12px;  --jnb-lh-caption:    1.4;  --jnb-tr-caption:    0.18em;

  /* ---- Space — 8px base unit --------------------------------------------- */
  --jnb-space-1:  8px;
  --jnb-space-2:  16px;
  --jnb-space-3:  24px;
  --jnb-space-4:  32px;
  --jnb-space-6:  48px;
  --jnb-space-7:  56px;
  --jnb-gap-component: var(--jnb-space-2);
  --jnb-gap-section:   var(--jnb-space-6);

  /* ---- Logo -------------------------------------------------------------- */
  --jnb-logo-min: 48px;  /* monogram height; below this, drop the wordmark */
  /* Clear space = 1x the height of the "N" in the monogram, on all sides. */

  /* ---- City pill --------------------------------------------------------- */
  /* Radius and padding are ratios of the pill's own text height. */
  --jnb-pill-bg: var(--jnb-white);
  --jnb-pill-text: var(--jnb-near-black);
  --jnb-pill-radius-ratio: 0.55;
  --jnb-pill-pad-y-ratio: 0.35;
  --jnb-pill-pad-x-ratio: 1.1;
}

@media (min-width: 768px) {
  :root {
    --jnb-size-display-xl: 96px;
    --jnb-size-display:    64px;
    --jnb-size-h1:         40px;
    --jnb-size-h2:         24px;
    --jnb-size-body-lg:    18px;
    --jnb-size-body:       16px;
    --jnb-size-caption:    13px;
    --jnb-gap-section:     var(--jnb-space-7);
  }
}

/* ---- Type primitives -----------------------------------------------------
 * The display face is caps-only and never carries a long passage. */

.jnb-display-xl,
.jnb-display,
.jnb-h1 {
  font-family: var(--jnb-font-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--jnb-white);
}

.jnb-display-xl { font-size: var(--jnb-size-display-xl); line-height: var(--jnb-lh-display-xl); letter-spacing: var(--jnb-tr-display-xl); }
.jnb-display    { font-size: var(--jnb-size-display);    line-height: var(--jnb-lh-display);    letter-spacing: var(--jnb-tr-display); }
.jnb-h1         { font-size: var(--jnb-size-h1);         line-height: var(--jnb-lh-h1);         letter-spacing: var(--jnb-tr-h1); }

.jnb-h2 {
  font-family: var(--jnb-font-body);
  font-weight: 600;
  font-size: var(--jnb-size-h2);
  line-height: var(--jnb-lh-h2);
}

.jnb-body-lg { font-family: var(--jnb-font-body); font-weight: 400; font-size: var(--jnb-size-body-lg); line-height: var(--jnb-lh-body-lg); }
.jnb-body    { font-family: var(--jnb-font-body); font-weight: 400; font-size: var(--jnb-size-body);    line-height: var(--jnb-lh-body); }

.jnb-caption {
  font-family: var(--jnb-font-body);
  font-weight: 500;
  font-size: var(--jnb-size-caption);
  line-height: var(--jnb-lh-caption);
  letter-spacing: var(--jnb-tr-caption);
  text-transform: uppercase;
}

/* ---- The city pill -------------------------------------------------------
 * The official city-edition device. The only solid white block in the system.
 * Its width must never exceed the width of the event name above it. */

.jnb-city-pill {
  display: inline-block;
  font-family: var(--jnb-font-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--jnb-pill-text);
  background: var(--jnb-pill-bg);
  letter-spacing: var(--jnb-display-tracking);
  /* 1em here is the pill's own text height, so the ratios hold at any size. */
  padding: calc(var(--jnb-pill-pad-y-ratio) * 1em) calc(var(--jnb-pill-pad-x-ratio) * 1em);
  border-radius: calc(var(--jnb-pill-radius-ratio) * 1em);
}

/* ---- Photography ---------------------------------------------------------
 * Text on a photo always sits on a scrim. No exceptions. */

.jnb-photo {
  position: relative;
  background-size: cover;
  background-position: center;
}

.jnb-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--jnb-scrim-soft) 0%, var(--jnb-scrim-strong) 100%);
  pointer-events: none;
}

.jnb-photo > * { position: relative; z-index: 1; }

/* ---- The one gold moment -------------------------------------------------
 * Exactly one per composition: the key fact or the primary call to action.
 * If a layout needs a second gold element, the layout is wrong. */

.jnb-cta {
  display: inline-block;
  font-family: var(--jnb-font-body);
  font-weight: 600;
  font-size: var(--jnb-size-body-lg);
  color: var(--jnb-near-black);
  background: var(--jnb-gold);
  padding: var(--jnb-space-2) var(--jnb-space-4);
  border-radius: var(--jnb-space-1);
  text-decoration: none;
  /* Comfortable for an older hand on a phone. */
  min-height: 48px;
}

.jnb-accent-text { color: var(--jnb-gold); }