/* Copied verbatim from brandnorth.com src/styles/bn-tokens.css (2026-10-05).
   Re-copy rather than edit so the careers site stays on the main brand system. */
/* ============================================================
   Brand North — Colors & Type
   Foundational design tokens. Import this once at the top of
   any document. Use the semantic vars (--bn-fg-1, --bn-h1, etc)
   in your styles; reach for raw vars only when composing new
   semantic tokens.
   ============================================================ */

/* ---- Webfonts (locally hosted, brand-supplied) ----------- */
/* Outfit — one variable-font file covers the full 100–900 weight range,
   so every headline/body/wordmark weight on the site loads from a single
   ~34 KB WOFF2 request. This used to be 9 separate @font-face rules (a
   variable font PLUS 8 redundant static-weight TTFs, ~290 KB of dead
   weight since the variable font already covers every weight any static
   file did) — AND the exact same family was being fetched a second time
   from Google Fonts via a <link> in MainLayout.astro. Neither the static
   TTFs nor the CDN request are needed; this is the only Outfit load. */
@font-face { font-family: 'Outfit'; src: url('/fonts/OutfitVariable.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }

/* Mono companion, self-hosted (2026-09-29). It came from the Google Fonts
   CDN, which gave Google every visitor's IP address and cost a render-blocking
   stylesheet (~0.9 s on mobile). One variable file per subset covers 400 and
   500; unicode-range means the latin-ext file is only fetched when a page
   actually uses one of its glyphs. SIL Open Font License. */
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono-latin.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono-latin-ext.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* ============================================================
     COLOR — RAW PALETTE
     ============================================================ */

  /* North Navy — primary. The deep midnight from the wordmark. */
  --bn-navy-900: #00003d;
  --bn-navy-800: #000062;   /* PRIMARY */
  --bn-navy-700: #1a1a7a;
  --bn-navy-600: #353593;
  --bn-navy-500: #5050ad;
  --bn-navy-400: #7878c2;
  --bn-navy-300: #a0a0d4;
  --bn-navy-200: #c8c8e6;   /* echoes lavender "BRAND" half of the logo */
  --bn-navy-100: #e4e4f2;
  --bn-navy-50:  #f3f3fa;

  /* Accent Pink — brand accent for arrows, links, in-motion UI. */
  --bn-pink-900: #8a0d51;
  --bn-pink-700: #c01874;
  --bn-pink-600: #eb2188;   /* ACCENT */
  --bn-pink-500: #f04d9f;   /* CTA hover — navy on this is 5.87:1 */
  --bn-pink-300: #f9a3cc;
  --bn-pink-100: #fde0ee;

  /* Neutrals — paper/ink. Slightly cool to sit next to navy. */
  --bn-ink:      #0a0a14;
  --bn-graphite: #2a2a36;
  --bn-slate:    #4d4d5c;
  --bn-steel:    #6d6d7b;   /* was #767685: 4.47:1 on white, 4.32:1 on snow */
  --bn-fog:      #b1b1bd;
  --bn-mist:     #d8d8df;
  --bn-cloud:    #ececf1;
  --bn-paper:    #f6f6f9;
  --bn-snow:     #fbfbfd;
  --bn-white:    #ffffff;

  /* ============================================================
     COLOR — GROUND-AWARE ROLES

     The raw palette above says nothing about which background a
     colour belongs on, and that is what broke. --bn-navy-800 is the
     primary navy: correct as text on a light ground and as a fill.
     It was also used as the text colour inside the homepage's dark
     sections, where it renders at 1.0-1.1:1 against the 4.5:1 AA
     floor. Forty text elements were effectively invisible, including
     the word "Team" (identical foreground and background), an entire
     H2, and every falling metric in the dashboard. --bn-navy-200 had
     the mirror-image problem: a light-on-dark colour used on white
     for the section eyebrows, at 1.48:1.

     So never reach for a raw palette entry for text again. Pick the
     role that names the ground you are on. Every ratio below is
     measured against its stated ground.
     ============================================================ */

  /* Accents. The italic phrase in a heading, a metric, a hover state. */
  --bn-accent-on-light: var(--bn-navy-800);  /* 10.3:1 on white   */
  --bn-accent-on-dark:  var(--bn-navy-200);  /* 12.1:1 on ink     */

  /* Body and heading text. */
  --bn-text-on-dark:       rgba(255, 255, 255, 0.94);
  --bn-text-on-light:      var(--bn-ink);
  --bn-muted-on-dark:      var(--bn-navy-300);  /*  8.0:1 on ink   */
  --bn-muted-on-light:     var(--bn-slate);     /*  8.6:1 on white */

  /* Mono eyebrows (11px uppercase, so they need the full 4.5:1). */
  --bn-eyebrow-on-light:   var(--bn-navy-500);  /*  6.9:1 on white */
  --bn-eyebrow-on-dark:    var(--bn-navy-300);  /*  8.0:1 on ink   */

  /* Solid CTA fill. Per George: keep the brand pink.
     White on --bn-pink-600 is 4.11:1 and fails AA, so the text goes navy
     instead of the fill going darker — #00003d on #eb2188 measures 4.78:1.
     Consequence worth knowing: the hover must LIGHTEN. Navy against the
     darker pinks collapses (3.4:1 on pink-700, 2.11:1 on pink-900), so the
     usual darken-on-hover would have broken AA on the interaction state
     while the resting state passed. --bn-pink-500 exists for that. */
  --bn-cta-fill:           var(--bn-pink-600);
  --bn-cta-fill-hover:     var(--bn-pink-500);
  --bn-cta-text:           var(--bn-navy-900);
  --bn-accent-pink-on-dark: var(--bn-pink-600); /*  4.8:1 on ink   */

  /* Status — used sparingly in product UI. */
  --bn-success: #16a34a;
  --bn-warning: #d97706;
  --bn-danger:  #dc2626;
  --bn-info:    var(--bn-pink-600);

  /* ============================================================
     COLOR — SEMANTIC
     ============================================================ */
  --bn-bg:        var(--bn-white);
  --bn-bg-alt:    var(--bn-paper);
  --bn-bg-deep:   var(--bn-navy-800);
  --bn-bg-deeper: var(--bn-navy-900);

  --bn-fg-1: var(--bn-ink);
  --bn-fg-2: var(--bn-graphite);
  --bn-fg-3: var(--bn-slate);
  --bn-fg-4: var(--bn-steel);

  --bn-fg-on-deep-1: var(--bn-white);
  --bn-fg-on-deep-2: var(--bn-navy-200);
  --bn-fg-on-deep-3: var(--bn-navy-300);

  --bn-accent:        var(--bn-pink-600);
  --bn-accent-hover:  var(--bn-pink-700);
  --bn-accent-press:  var(--bn-pink-900);
  --bn-link:          var(--bn-pink-600);

  --bn-primary:       var(--bn-navy-800);
  --bn-primary-hover: var(--bn-navy-700);
  --bn-primary-press: var(--bn-navy-900);

  --bn-border:        var(--bn-cloud);
  --bn-border-strong: var(--bn-mist);
  --bn-border-deep:   rgba(255,255,255,0.12);

  --bn-focus-ring: 0 0 0 3px rgba(235,33,136,0.30);

  /* ============================================================
     TYPOGRAPHY — FAMILIES
     ============================================================ */
  --bn-font-display: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --bn-font-sans:    'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bn-font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ============================================================
     TYPOGRAPHY — SCALE  (modular, base 16)
     ============================================================ */
  --bn-fs-12: 0.75rem;
  --bn-fs-13: 0.8125rem;
  --bn-fs-14: 0.875rem;
  --bn-fs-15: 0.9375rem;
  --bn-fs-16: 1rem;
  --bn-fs-18: 1.125rem;
  --bn-fs-20: 1.25rem;
  --bn-fs-24: 1.5rem;
  --bn-fs-28: 1.75rem;
  --bn-fs-32: 2rem;
  --bn-fs-40: 2.5rem;
  --bn-fs-48: 3rem;
  --bn-fs-60: 3.75rem;
  --bn-fs-72: 4.5rem;
  --bn-fs-96: 6rem;

  --bn-lh-tight:  1.05;
  --bn-lh-snug:   1.2;
  --bn-lh-normal: 1.45;
  --bn-lh-loose:  1.6;

  --bn-tr-display: -0.03em;
  --bn-tr-tight:   -0.015em;
  --bn-tr-normal:  0;
  --bn-tr-wide:    0.04em;
  --bn-tr-eyebrow: 0.16em;

  --bn-fw-light:    300;
  --bn-fw-regular:  400;
  --bn-fw-medium:   500;
  --bn-fw-semibold: 600;
  --bn-fw-bold:     700;
  --bn-fw-black:    800;

  /* ============================================================
     SPACING  (4-pt baseline, with a 2px micro tier)
     ============================================================ */
  --bn-space-0:  0;
  --bn-space-1:  2px;
  --bn-space-2:  4px;
  --bn-space-3:  8px;
  --bn-space-4:  12px;
  --bn-space-5:  16px;
  --bn-space-6:  24px;
  --bn-space-7:  32px;
  --bn-space-8:  48px;
  --bn-space-9:  64px;
  --bn-space-10: 96px;
  --bn-space-11: 128px;
  --bn-space-12: 160px;

  /* ============================================================
     RADII
     ============================================================ */
  --bn-radius-0:    0;
  --bn-radius-sm:   4px;
  --bn-radius-md:   8px;
  --bn-radius-lg:   14px;
  --bn-radius-xl:   20px;
  --bn-radius-2xl:  28px;
  --bn-radius-pill: 999px;

  /* ============================================================
     SHADOWS
     ============================================================ */
  --bn-shadow-xs: 0 1px 2px rgba(10,10,20,0.06);
  --bn-shadow-sm: 0 2px 6px rgba(10,10,20,0.06), 0 1px 2px rgba(10,10,20,0.04);
  --bn-shadow-md: 0 8px 24px rgba(10,10,20,0.08), 0 2px 6px rgba(10,10,20,0.04);
  --bn-shadow-lg: 0 24px 60px rgba(0,0,98,0.18), 0 6px 16px rgba(0,0,98,0.10);
  --bn-shadow-deep: 0 40px 80px rgba(0,0,98,0.30);
  --bn-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.10);

  /* ============================================================
     CARD COMPONENTS (Hallmark redesign — CardGrid/StatCards/
     StepSequence/SpecSheet). Aliases onto existing tokens rather than
     new values, so the card system stays inside the locked palette.
     ============================================================ */
  --bn-card-radius:       var(--bn-radius-lg);
  --bn-card-shadow:       var(--bn-shadow-md);
  --bn-card-hover-border: var(--bn-navy-800);

  /* ============================================================
     MOTION
     ============================================================ */
  --bn-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --bn-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --bn-dur-fast:    140ms;
  --bn-dur-base:    220ms;
  --bn-dur-slow:    420ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --bn-container:   1240px;
  --bn-container-narrow: 880px;
  --bn-gutter:      24px;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   ============================================================ */

.bn-eyebrow {
  font-family: var(--bn-font-sans);
  font-size: var(--bn-fs-13);
  font-weight: var(--bn-fw-semibold);
  letter-spacing: var(--bn-tr-eyebrow);
  text-transform: uppercase;
  color: var(--bn-fg-3);
}

.bn-display-1 {
  font-family: var(--bn-font-display);
  font-size: clamp(3.5rem, 7vw, var(--bn-fs-96));
  /* Was Medium/500, commented "less bold", until George asked for more weight.
     design.md specifies 700-800 for display, so 500 was drift from the locked
     system rather than a standing exception. */
  font-weight: 800;
  line-height: var(--bn-lh-tight);
  letter-spacing: var(--bn-tr-display);
  color: var(--bn-fg-1);
}

.bn-display-2 {
  font-family: var(--bn-font-display);
  font-size: clamp(2.5rem, 5vw, var(--bn-fs-72));
  font-weight: 700;
  line-height: var(--bn-lh-tight);
  letter-spacing: var(--bn-tr-display);
}

.bn-h1 {
  font-family: var(--bn-font-sans);
  font-size: clamp(2rem, 3.5vw, var(--bn-fs-48));
  font-weight: var(--bn-fw-semibold);
  line-height: var(--bn-lh-snug);
  letter-spacing: var(--bn-tr-tight);
  color: var(--bn-fg-1);
}

.bn-h2 {
  font-family: var(--bn-font-sans);
  font-size: clamp(1.75rem, 2.75vw, var(--bn-fs-40));
  font-weight: var(--bn-fw-semibold);
  line-height: var(--bn-lh-snug);
  letter-spacing: var(--bn-tr-tight);
  color: var(--bn-fg-1);
}

.bn-h3 {
  font-family: var(--bn-font-sans);
  font-size: var(--bn-fs-28);
  font-weight: var(--bn-fw-semibold);
  line-height: var(--bn-lh-snug);
  color: var(--bn-fg-1);
}

.bn-h4 {
  font-family: var(--bn-font-sans);
  font-size: var(--bn-fs-20);
  font-weight: var(--bn-fw-semibold);
  line-height: var(--bn-lh-snug);
  color: var(--bn-fg-1);
}

.bn-lead {
  font-family: var(--bn-font-sans);
  font-size: var(--bn-fs-20);
  font-weight: var(--bn-fw-regular);
  line-height: var(--bn-lh-normal);
  color: var(--bn-fg-2);
}

.bn-body {
  font-family: var(--bn-font-sans);
  font-size: var(--bn-fs-16);
  font-weight: var(--bn-fw-regular);
  line-height: var(--bn-lh-loose);
  color: var(--bn-fg-2);
}

.bn-body-sm {
  font-family: var(--bn-font-sans);
  font-size: var(--bn-fs-14);
  line-height: var(--bn-lh-loose);
  color: var(--bn-fg-2);
}

.bn-caption {
  font-family: var(--bn-font-sans);
  font-size: var(--bn-fs-13);
  line-height: var(--bn-lh-normal);
  color: var(--bn-fg-3);
}

.bn-mono {
  font-family: var(--bn-font-mono);
  font-size: var(--bn-fs-14);
  letter-spacing: var(--bn-tr-normal);
  color: var(--bn-fg-2);
}

.bn-step-num {
  font-family: var(--bn-font-display);
  font-size: clamp(3rem, 6vw, var(--bn-fs-96));
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--bn-tr-display);
  color: var(--bn-navy-200);
}