/* ==========================================================================
   JETLAGO — brand tokens
   Drop-in for jetlago.com. Paper is the ground, Ink does the structural work,
   Signal is a signal: roughly 3% of any surface, never body copy.
   See brand/BRAND.md §9 and §10.
   ========================================================================== */

:root {
  /* --- colour ------------------------------------------------------- */
  --jl-paper: #ffffff;        /* ground                                */
  --jl-bond: #f6f5f2;         /* alternate band, inset panel           */
  --jl-ink: #14181d;          /* type, rules, reversed grounds         */
  --jl-slate: #6b7280;        /* secondary type, labels                */
  --jl-signal: #f5a300;       /* primary action, centre stripe, rule   */
  --jl-signal-deep: #8a5a00;  /* Signal as TEXT — required at body size */

  --jl-rule: #d9d7d2;         /* hairline on paper                     */
  --jl-rule-ink: #2a2f36;     /* hairline on ink                       */

  /* --- type --------------------------------------------------------- */
  /* Wordmark/display: Archivo 900 recommended (open licence, safe for
     decals and embroidery). Swap the first entry if the grotesque wins. */
  --jl-display: Archivo, "Helvetica Neue", "Arial Black", Arial, sans-serif;
  --jl-body: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --jl-data: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --jl-display-tracking: -0.055em;
  --jl-display-leading: 0.92;

  /* --- measure ------------------------------------------------------ */
  --jl-wrap: 1180px;
  --jl-gutter: 28px;
  --jl-pad-section: 104px;
}

/* --------------------------------------------------------------------------
   Migration map — the old dark-cab tokens the site currently ships, pointed
   at the inverted palette. Keep this block until styles.css is refactored,
   then delete it.
   -------------------------------------------------------------------------- */
:root {
  --cab: var(--jl-paper);
  --dash: var(--jl-bond);
  --dash-2: var(--jl-rule);
  --glow: var(--jl-signal);
  --glow-hi: #ffb524;
  --beam: var(--jl-ink);
  --haze: var(--jl-slate);
  --yard: var(--jl-bond);
  --ink: var(--jl-ink);
  --display: var(--jl-display);
  --body: var(--jl-body);
  --data: var(--jl-data);
}

/* --------------------------------------------------------------------------
   Roles
   -------------------------------------------------------------------------- */
.jl-display {
  font-family: var(--jl-display);
  font-weight: 900;
  letter-spacing: var(--jl-display-tracking);
  line-height: var(--jl-display-leading);
  text-transform: uppercase;
}

.jl-data {
  font-family: var(--jl-data);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Signal at paragraph size must use the deep step. */
.jl-emph { color: var(--jl-signal-deep); }

/* Primary action: solid Ink on Paper. Signal is reserved for the mark, the
   rule, and small state indicators — not for large button fills. */
.jl-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--jl-data);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 19px 30px;
  border: 1px solid transparent;
  background: var(--jl-ink);
  color: var(--jl-paper);
  cursor: pointer;
}
.jl-btn:hover { background: #000000; }
.jl-btn--ghost {
  background: transparent;
  color: var(--jl-ink);
  border-color: var(--jl-rule);
}
.jl-btn--ghost:hover { border-color: var(--jl-ink); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--jl-signal);
  outline-offset: 3px;
}

/* The wordmark's signal rule: exactly the width of the word. Apply to an
   inline-block wrapper around the wordmark — never to a full-width block. */
.jl-wordmark {
  display: inline-block;
}
.jl-wordmark__rule {
  height: 0.125em;   /* cap height / 8 */
  margin-top: 0.14em;
  background: var(--jl-signal);
}