/* =========================================================
   Honest Jets — Colors & Typography
   The core token layer. Reference these vars everywhere.
   ========================================================= */

/* Tiempos Text — the real brand serif. Variable font, roman + italic.
   Loaded from local fonts/ to avoid the Source Serif 4 substitution. */
@font-face {
  font-family: 'Tiempos Text';
  src: url('fonts/tiempos-text-vf-roman.woff2') format('woff2-variations'),
       url('fonts/tiempos-text-vf-roman.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tiempos Text';
  src: url('fonts/tiempos-text-vf-italic.woff2') format('woff2-variations'),
       url('fonts/tiempos-text-vf-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Suisse Int'l — the real brand sans, served locally.
   Five weights × roman+italic. Body, UI, navigation, buttons. */
@font-face {
  font-family: 'Suisse Int\'l';
  src: url('fonts/suisse-intl-light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Suisse Int\'l';
  src: url('fonts/suisse-intl-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Suisse Int\'l';
  src: url('fonts/suisse-intl-regular-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Suisse Int\'l';
  src: url('fonts/suisse-intl-medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Suisse Int\'l';
  src: url('fonts/suisse-intl-medium-italic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Suisse Int\'l';
  src: url('fonts/suisse-intl-semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Suisse Int\'l';
  src: url('fonts/suisse-intl-semibold-italic.woff2') format('woff2');
  font-weight: 600; font-style: italic; font-display: swap;
}

:root {
  /* -----------------------------------------------------
     Brand palette — these five only. Do not invent.
     ----------------------------------------------------- */
  --hj-cream:     #F8F6F1;  /* default page surface         */
  --hj-navy:      #122038;  /* body copy, headlines, UI     */
  --hj-gold:      #BD984A;  /* rules, accents — never fill  */
  --hj-warm-ash:  #6B6257;  /* secondary text, captions     */
  --hj-linen:     #DDD8CE;  /* borders, dividers            */

  /* Tonal extensions of navy (for hover, press, ink layers).
     Derived via lightness shifts; not new brand colors.    */
  --hj-navy-700:  #1B2C49;
  --hj-navy-500:  #2C3F60;
  --hj-navy-300:  #6A7894;
  --hj-navy-100:  #C8CFDB;

  /* Tonal extensions of cream/linen, for surfaces.         */
  --hj-paper:     #FFFFFF;            /* card / sheet       */
  --hj-cream-deep:#F0EBE0;            /* slight recession   */

  /* Semantic / functional. Used sparingly.                 */
  --hj-status-go:    #4B6A4A;         /* confirmed flight   */
  --hj-status-hold:  #8A6A2A;         /* attention / mech   */
  --hj-status-stop:  #7A3328;         /* abort / no-go      */

  /* -----------------------------------------------------
     Foreground / background semantic tokens
     ----------------------------------------------------- */
  --fg-1:  var(--hj-navy);            /* primary copy       */
  --fg-2:  var(--hj-warm-ash);        /* secondary copy     */
  --fg-3:  var(--hj-navy-300);        /* tertiary, meta     */
  --fg-accent: var(--hj-gold);

  --bg-1:  var(--hj-cream);           /* page               */
  --bg-2:  var(--hj-paper);           /* card               */
  --bg-3:  var(--hj-cream-deep);      /* recessed band      */
  --bg-ink: var(--hj-navy);           /* inverted surface   */

  --rule-1: var(--hj-linen);          /* hairline divider   */
  --rule-2: var(--hj-gold);           /* accent rule        */
  --rule-strong: var(--hj-navy);      /* hard rule          */

  /* -----------------------------------------------------
     Type families
     Tiempos Text (display) — real brand serif, served locally
     Suisse Int'l (text/UI) — real brand sans, served locally
     ----------------------------------------------------- */
  --font-serif: "Tiempos Text", "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-sans:  "Suisse Int'l", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* -----------------------------------------------------
     Type scale — restrained, editorial.
     Sizes pair with generous line-height; copy reads slow.
     ----------------------------------------------------- */
  --fs-display:  64px;  --lh-display: 1.05;
  --fs-h1:       44px;  --lh-h1:      1.10;
  --fs-h2:       32px;  --lh-h2:      1.15;
  --fs-h3:       24px;  --lh-h3:      1.25;
  --fs-h4:       18px;  --lh-h4:      1.35;

  --fs-lede:     22px;  --lh-lede:    1.50;
  --fs-body:     16px;  --lh-body:    1.60;
  --fs-small:    14px;  --lh-small:   1.50;
  --fs-meta:     12px;  --lh-meta:    1.40;

  --fs-eyebrow:  11px;  --lh-eyebrow: 1.20;   /* gold caps  */

  /* Tracking. Tight on display; wide on caps.              */
  --tr-tight:    -0.015em;
  --tr-normal:    0;
  --tr-wide:      0.08em;
  --tr-eyebrow:   0.18em;

  /* -----------------------------------------------------
     Spacing — 4px base, 8px step
     ----------------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* -----------------------------------------------------
     Borders, radii, elevation
     The brand is institutional — radii are small, shadows
     are quiet. Cards rely on hairlines, not lift.
     ----------------------------------------------------- */
  --border-hair: 1px solid var(--rule-1);
  --border-strong: 1px solid var(--rule-strong);
  --border-gold: 1px solid var(--hj-gold);

  --radius-0: 0px;
  --radius-1: 2px;        /* default — inputs, tags         */
  --radius-2: 4px;        /* cards, buttons                 */
  --radius-3: 8px;        /* modals, sheets — rare          */

  --shadow-1: 0 1px 0 rgba(18, 32, 56, 0.04),
              0 1px 2px rgba(18, 32, 56, 0.04);
  --shadow-2: 0 2px 4px rgba(18, 32, 56, 0.06),
              0 8px 24px rgba(18, 32, 56, 0.06);
  --shadow-inset: inset 0 0 0 1px var(--rule-1);

  /* -----------------------------------------------------
     Motion — slow, considered, no bounce
     ----------------------------------------------------- */
  --ease-standard: cubic-bezier(0.32, 0.08, 0.24, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* Max content widths */
  --measure-prose: 64ch;
  --content-max:   1200px;
}

/* =========================================================
   Base element styles — semantic vars in action
   ========================================================= */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .hj-display {
  font-family: var(--font-serif);
  font-weight: 400;          /* serif holds at regular     */
  color: var(--fg-1);
  letter-spacing: var(--tr-tight);
  margin: 0;
  text-wrap: balance;
}

.hj-display { font-size: var(--fs-display); line-height: var(--lh-display); }
h1          { font-size: var(--fs-h1);      line-height: var(--lh-h1); }
h2          { font-size: var(--fs-h2);      line-height: var(--lh-h2); }
h3          { font-size: var(--fs-h3);      line-height: var(--lh-h3); }
h4          { font-size: var(--fs-h4);      line-height: var(--lh-h4); font-weight: 500; }

.hj-lede {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  color: var(--fg-1);
  max-width: var(--measure-prose);
}

p {
  margin: 0;
  max-width: var(--measure-prose);
  text-wrap: pretty;
}

small, .hj-small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-2); }
.hj-meta         { font-size: var(--fs-meta);  line-height: var(--lh-meta);  color: var(--fg-2); }

/* Gold eyebrow — section labels, single-word accents.
   Always caps, wide tracked, never a background fill.     */
.hj-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--hj-gold);
}

/* Thin vertical gold rule — used in the wordmark and as
   an inline separator between metadata elements.          */
.hj-rule-v {
  display: inline-block;
  width: 1px;
  background: var(--hj-gold);
  align-self: stretch;
}

/* Hairline horizontal rule.                                */
hr, .hj-rule {
  border: 0;
  height: 1px;
  background: var(--rule-1);
  margin: var(--sp-5) 0;
}

a {
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: 1px solid var(--hj-gold);
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--hj-gold); }

code, kbd, pre { font-family: var(--font-mono); font-size: 0.92em; }

::selection { background: var(--hj-navy); color: var(--hj-cream); }