/* Bearpath — shared brand foundation.
   Loaded by BOTH surfaces (the planner and the permit booking guide) after
   assets/brand/tokens/bearpath-colors.css and before the page's own stylesheet,
   so the two pages read as one product without either of them restating the
   Rainforest palette.

   This file deliberately holds no page layout. It holds exactly three things:
   the application typeface, the mapping from the committed brand tokens to the
   names the application CSS uses, and the handful of primitives both pages
   share (focus ring, header logo, print logo swap).

   Every colour here resolves to a --bearpath-* custom property defined in
   assets/brand/tokens/bearpath-colors.css. No hex value is copied into this
   file: there must be exactly one Rainforest palette in the repository, and it
   is the committed token file. */

/* ── Application typeface ─────────────────────────────────────────────────
   Figtree 2.0.3, self-hosted from vendor/figtree/ — see that directory's
   README.md for upstream, checksums and licence. Distributed under the SIL
   Open Font License 1.1; vendor/figtree/OFL.txt ships alongside the font in
   dist/ to satisfy the licence's "must be distributed with the font"
   requirement.

   One variable file covers the whole UI weight range (the wght axis spans
   300-900; the app uses 400/500/600/700), so this is a single 27 KB request
   rather than four static faces.

   font-display: swap — the fallback stack renders immediately and is replaced
   when the face arrives. The alternative, a block period, would blank the
   planner's dates, quotas and campsite names on a cold cache; for a page whose
   entire substance is text, showing that text late is worse than showing it in
   the fallback for a moment. The Bearpath logo is an outlined SVG and never
   waits on this file. */
@font-face {
  font-family: "Figtree";
  /* format("woff2") rather than the legacy format("woff2-variations"): every
     browser that supports variable fonts loads this file from the plain
     format hint, and the legacy hint is rejected outright by some of them. */
  src: url("vendor/figtree/figtree-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* System stack retained as the fallback: it is what shipped before Figtree
     and it is metrically close enough that the swap is not disruptive. */
  --brand-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Brand ink */
  --brand-primary: var(--bearpath-primary);        /* spruce   — header, primary action, focus */
  --brand-deep:    var(--bearpath-deep-ink);       /* deep ink — hover/pressed of the above     */

  /* Surfaces, light to sunk */
  --panel-bg:      var(--bearpath-bright-surface); /* panels, cards, inputs   */
  --bg:            var(--bearpath-canvas);         /* page background         */
  --surface-sunk:  var(--bearpath-canvas);         /* bars and panel footers  */
  --surface-tint:  var(--bearpath-soft-surface);   /* hover / selected / disabled fill */

  /* Text hierarchy */
  --text:          var(--bearpath-deep-ink);
  --text-body:     var(--bearpath-body);
  --text-muted:    var(--bearpath-muted);

  /* Lines */
  --border:        var(--bearpath-border);         /* panel edges, card outlines */
  --divider:       var(--bearpath-soft-surface);   /* within-list separators  */
  /* The visible boundary of a text input, select or plain button. WCAG 1.4.11
     asks for 3:1 against the adjacent surface where that boundary is what
     identifies the control; the decorative --border above is ~1.4:1 and would
     not carry it. Kept separate so panel and card edges stay quiet. */
  --control-border: var(--bearpath-support);

  --focus:         var(--brand-primary);

  /* Destination orange (--bearpath-destination) is deliberately absent from
     this mapping, and stays absent: it is not a general-purpose UI token.

     The durable rule is narrower than "unused". Destination orange is never a
     permit or availability state — no --status-* may resolve to it and no
     campsite marker may be filled with it. What it MAY mark is selection: the
     map uses it as the stroke on the campsite or trail you are currently
     pointing at, which is a destination accent rather than a state, and it is
     named there through one SELECTION_COLOR constant in app.js.

     Walk-up has its own non-orange booking-method colour precisely so that
     remains unambiguous; it was moved off orange in the map-polish lane for
     exactly this reason. */
}

/* ── Focus ────────────────────────────────────────────────────────────────
   One visible ring for every keyboard-reachable control on both pages.
   Individual controls may still override it (the guide's header buttons sit on
   spruce and use white), but nothing is left with only the browser default. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ── Header logo ──────────────────────────────────────────────────────────
   The approved horizontal lockup, sized by height so its 5242.39 x 960 aspect
   ratio is preserved by the SVG itself. width/height attributes in the markup
   reserve the box before the file arrives, so the header never reflows.

   The image carries the Bearpath name, so it has alt="Bearpath" and there is
   no adjacent visible "Bearpath" text to duplicate. The park qualifier beside
   it is separate content, not part of the name. */
.brand-logo {
  display: inline-block;
  height: 26px;
  width: auto;
  vertical-align: middle;
  /* Approved clear space is one eye diameter (~1.2px at this size); the
     lockup's own 30-unit padding is smaller, so the gap is made up here. */
  margin-right: 12px;
}

/* Screen uses the reversed lockup, because both headers are spruce.
   Print flattens those headers to white, where a warm-stone logo would be
   invisible — so the monochrome lockup (fill: currentColor, i.e. black in an
   <img>) takes over. Exactly one is ever displayed, and display:none removes
   the other from the accessibility tree, so "Bearpath" is announced once. */
.brand-logo--print { display: none; }

@media print {
  .brand-logo--screen { display: none; }
  .brand-logo--print  { display: inline-block; }
}