/* ============================================================
   North Aero — Colors & Type
   ============================================================
   The palette is grounded in mid-century aviation: hangar
   charcoals, sectional-chart parchment, runway markings, and
   the unmistakable aviation orange of windsocks and the
   inside of a Cessna's checklist binder.

   Type pairs an italic display face (echoing the wordmark)
   with a utilitarian sans for body, plus a monospace for
   data, frequencies, and METARs.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bowlby+One+SC&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Oswald:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600;1,700&display=swap');

:root {
  /* ─────────  CORE PALETTE  ───────── */
  /* Hangar — the charcoal of the logo, of weathered metal,
     of a Cessna panel at dusk. The brand's foundational dark. */
  --hangar-900: #1A1B1D;   /* near-black, only for body text on parchment */
  --hangar-800: #2A2C2F;
  --hangar-700: #3B3E42;
  --hangar-600: #4F5256;   /* logo charcoal */
  --hangar-500: #6B6E73;
  --hangar-400: #909499;
  --hangar-300: #B8BCC2;
  --hangar-200: #D8DBDF;
  --hangar-100: #ECEEF1;
  --hangar-50:  #F5F6F8;

  /* Parchment — the warm off-whites of an FAA sectional,
     a logbook page, the cover of an Airman's Information Manual. */
  --parchment:        #F4EFE3;
  --parchment-light:  #FAF6EC;
  --parchment-dark:   #E8E1D0;
  --parchment-deep:   #D9CFB8;

  /* Runway — aviation orange. Windsocks, hi-vis vests,
     "REMOVE BEFORE FLIGHT" streamers. Earned, not decorative. */
  --runway-700: #B5430E;
  --runway-600: #D55518;
  --runway-500: #E86A28;   /* primary accent */
  --runway-400: #F08A4F;
  --runway-300: #F6B084;
  --runway-100: #FBE4D2;

  /* Beacon — the rotating-beacon white-and-green of a
     non-towered airfield. Used sparingly for "go" states. */
  --beacon-700: #1F5F3A;
  --beacon-500: #2E8B57;
  --beacon-300: #7FBF9A;
  --beacon-100: #DCEEE3;

  /* Caution — the amber of a master-caution annunciator. */
  --caution-700: #8C6A0A;
  --caution-500: #D4A017;
  --caution-300: #EAC75C;
  --caution-100: #FAEFC7;

  /* Warning — master-warning red. */
  --warning-700: #8B1F1F;
  --warning-500: #C0392B;
  --warning-300: #E07A6F;
  --warning-100: #F7D7D2;

  /* Sky — used only for full-bleed atmospherics (hero
     skies, photographic accents). Never for UI chrome. */
  --sky-deep:    #2C3E50;
  --sky-dusk:    #4A6B8A;
  --sky-day:     #87B4D1;
  --sky-haze:    #C8DAE6;

  /* ─────────  SEMANTIC  ───────── */
  --bg:           var(--parchment-light);
  --bg-canvas:    var(--parchment);
  --bg-deep:      var(--parchment-dark);
  --bg-inverse:   var(--hangar-900);

  --surface:      #FFFFFF;
  --surface-alt:  var(--parchment-light);
  --surface-sunk: var(--parchment-dark);

  --fg:           var(--hangar-900);
  --fg-1:         var(--hangar-800);
  --fg-2:         var(--hangar-600);
  --fg-3:         var(--hangar-500);
  --fg-muted:     var(--hangar-400);
  --fg-inverse:   var(--parchment-light);

  --border:       var(--hangar-200);
  --border-strong:var(--hangar-400);
  --border-rule:  var(--hangar-700);   /* hairline rules — chart-like */

  --accent:       var(--runway-500);
  --accent-hover: var(--runway-600);
  --accent-press: var(--runway-700);
  --accent-soft:  var(--runway-100);

  --success:      var(--beacon-500);
  --success-soft: var(--beacon-100);
  --caution:      var(--caution-500);
  --caution-soft: var(--caution-100);
  --danger:       var(--warning-500);
  --danger-soft:  var(--warning-100);

  /* ─────────  TYPE FAMILIES  ─────────
     Display:  Oswald Italic — condensed, italic, the closest
               freely-licensed match to the logo's wordmark.
               (Substitution flag: see README.)
     Brand:    Bowlby One SC — heavy display, used very sparingly
               for hero stencil-style headlines reminiscent of
               nose-art and hangar signage.
     Body:     Inter — neutral, legible, modern sans for body
               text and UI. Used at slightly tighter tracking.
     Mono:     JetBrains Mono — for frequencies, METARs, N-numbers,
               checklist items, and tabular flight data.
  */
  --font-display: 'Oswald', 'Helvetica Neue Condensed', 'Arial Narrow', sans-serif;
  --font-brand:   'Bowlby One SC', 'Oswald', Impact, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ─────────  TYPE SCALE  ─────────
     A 1.25 (major third) scale, with display sizes pushed
     larger for hero impact. */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-lg:    18px;
  --text-xl:    22px;
  --text-2xl:   28px;
  --text-3xl:   36px;
  --text-4xl:   48px;
  --text-5xl:   64px;
  --text-6xl:   88px;
  --text-7xl:   120px;

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.45;
  --leading-loose:  1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.12em;   /* small-caps labels — used heavily */

  /* ─────────  SPACING  ─────────
     8px base. Tight side leans 4. */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ─────────  RADIUS  ─────────
     North Aero leans architectural. Most surfaces have 0–4px
     radii. Pills exist for runway-style chips only. */
  --radius-0:    0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 999px;

  /* ─────────  SHADOWS  ─────────
     Restrained. The brand prefers hairline rules and stamps
     over soft shadows. */
  --shadow-hairline: 0 0 0 1px var(--hangar-200);
  --shadow-card:     0 1px 0 var(--hangar-200), 0 8px 24px -12px rgba(26,27,29,0.18);
  --shadow-raised:   0 2px 0 var(--hangar-300), 0 18px 40px -16px rgba(26,27,29,0.28);
  --shadow-stamp:    inset 0 0 0 2px var(--hangar-900);  /* the "approved" stamp look */
  --shadow-inset:    inset 0 1px 2px rgba(26,27,29,0.12);

  /* ─────────  MOTION  ─────────
     Mechanical, not bouncy. Like an analog gauge needle. */
  --ease-needle:  cubic-bezier(0.32, 0.08, 0.24, 1);
  --ease-snap:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);

  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.h-display,
.h-hero {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--text-7xl);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg);
}

.h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  color: var(--fg);
}

.h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg);
}

.eyebrow,
.label-caps {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}

.p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
}

.p-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  color: var(--fg-1);
}

.p-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

.code,
.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.95em;
  letter-spacing: 0;
}

.data-tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* The signature italic wordmark style — used for hero brand
   moments, not to be over-used. */
.wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  font-stretch: condensed;
}

/* Nose-art / hangar-sign heavy display */
.h-stencil {
  font-family: var(--font-brand);
  font-size: var(--text-6xl);
  line-height: 0.9;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}