/* ============================================================================
   Njord — Njord
   Brand foundation: colour + type tokens
   "Fortune 500 thinking for the everyday operator."
   ----------------------------------------------------------------------------
   PALETTE (from the brand identity review — the Maritime Crest):
     Night Sky Indigo  #0D1320   authority neutral · dark-UI surface
     Teal Nebula       #276366   secondary · data series · links
     Polished Copper   #BB9365   signature accent · treasure = wealth
     Aureus Cream      #F6F2C8   warm light surface · print / foil
   ----------------------------------------------------------------------------
   Load fonts (CDN) alongside this file:
   <link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap" rel="stylesheet">
   ============================================================================ */

:root {
  /* --- TYPEFACES -------------------------------------------------------- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;   /* editorial / emotional moments */
  --font-sans:    "Geist", "Helvetica Neue", Arial, sans-serif;       /* body + UI (precise grotesque) */
  --font-mono:    "Geist Mono", "SF Mono", ui-monospace, monospace;   /* data labels, numerals, terminal */

  /* =========================================================================
     NEUTRALS — the "Night Sky" indigo ramp (var names kept as --ink-* so the
     system is portable). Cool, deep, slightly blue. ink-900 IS Night Sky Indigo.
     ========================================================================= */
  --ink-950: #070A12;
  --ink-900: #0D1320;   /* NIGHT SKY INDIGO — primary text, dark surface */
  --ink-800: #161F32;   /* raised dark panel, code */
  --ink-700: #243049;   /* borders on dark, hover */
  --ink-600: #3C4866;   /* muted heading on light */
  --ink-500: #5C6889;   /* secondary text */
  --ink-400: #8A95B0;   /* tertiary, captions, disabled */
  --ink-300: #B6BFD2;   /* placeholder, faint icon */
  --ink-200: #D7DCE7;   /* hairline borders, dividers (on light) */
  --ink-100: #E9ECF3;   /* subtle fills, table zebra */
  --ink-50:  #F3F5F9;   /* hover fills, inset panels */

  /* SURFACES — dual-mode: warm cream for light, deep indigo for the tool. */
  --aureus:        #F6F2C8;  /* AUREUS CREAM — warm accent surface, print, foil */
  --paper:         #FBF9EF;  /* page background, soft warm off-white (light aureus) */
  --surface:       #FFFFFF;  /* cards / panels on light */
  --surface-warm:  #F6F2C8;  /* warm panel / callout */
  --surface-sunken:#F3F1E4;  /* inset on cream */
  --surface-dark:  #0D1320;  /* the tool / hero — Night Sky */
  --surface-dark-2:#161F32;  /* raised dark panel */
  --hairline-warm: #E7E2CE;  /* hairline on cream surfaces */

  /* =========================================================================
     ACCENT — POLISHED COPPER (the signature)
     MONEY PSYCHOLOGY: the treasure-chest in the crest. Copper / gold is the
     colour of bullion, coin and foil — wealth you can hold. Reserved for
     emphasis, foils, key numbers, and primary action ON DARK. Never a big fill.
     Copper has weak contrast on cream, so see ACTION below for light surfaces.
     ========================================================================= */
  --copper:        #BB9365;  /* base */
  --copper-bright: #CFA97C;  /* on dark — buttons, highlights */
  --copper-hover:  #AC8456;  /* hover (light) */
  --copper-deep:   #9A7748;  /* pressed · text on cream */
  --copper-tint:   #F0E7D8;  /* faint wash on light */
  --copper-tint-2: #E4D4BD;  /* stronger wash / border */
  /* aliases so components that reference --accent pick up copper */
  --accent:        var(--copper);
  --accent-hover:  var(--copper-hover);
  --accent-strong: var(--copper-deep);
  --accent-bright: var(--copper-bright);
  --accent-tint:   var(--copper-tint);
  --accent-tint-2: var(--copper-tint-2);

  /* SECONDARY — TEAL NEBULA (data, intelligence, links) */
  --teal:        #276366;
  --teal-bright: #3E8E90;   /* on dark */
  --teal-deep:   #184A4D;   /* text on cream */
  --teal-tint:   #E0ECEC;

  /* PRIMARY ACTION on light surfaces = Night Sky Indigo (high contrast).
     On dark surfaces, primary action = copper. */
  --action:       #0D1320;
  --action-hover: #243049;

  /* =========================================================================
     FUNCTIONAL · TRAFFIC-SIGNAL MODEL — GO / CAUTION / STOP
     Status maps to a dashboard everyone knows. Functional only; these sit
     apart from the brand palette. Each has a dark *-ink tone for text on tint.
     ========================================================================= */
  --go:        #1E8E5A;  --go-ink:      #0C5A38;  --go-tint:      #E4F2EA;  /* success */
  --caution:   #D99A1C;  --caution-ink: #7E5C0E;  --caution-tint: #FAF1D9;  /* warning (amber ≠ copper) */
  --stop:      #CF3B45;  --stop-ink:    #8E2128;  --stop-tint:    #FBE7E8;  /* error */
  --info:      #2E69C9;  --info-ink:    #1C448C;  --info-tint:    #E6EDFA;  /* neutral info */
  --success: var(--go);  --success-tint: var(--go-tint);
  --warning: var(--caution); --warning-tint: var(--caution-tint);
  --error:   var(--stop);    --error-tint:   var(--stop-tint);

  /* =========================================================================
     DATA VISUALISATION — built on teal + copper, harmonious with navy/cream.
     ========================================================================= */
  --viz-1: #276366;  /* teal — primary series */
  --viz-2: #BB9365;  /* copper */
  --viz-3: #3E5C8A;  /* indigo-blue */
  --viz-4: #5C6889;  /* slate */
  --viz-5: #9A7748;  /* deep copper */
  --viz-6: #3E8E90;  /* bright teal */
  --viz-grid-light: #E7E2CE;  /* warm gridlines on cream */
  --viz-grid-dark:  #243049;  /* gridlines on night */
  --viz-axis:       #8A95B0;

  /* =========================================================================
     ELEVATION — restrained, cool-tinted. Hairlines do most of the work.
     ========================================================================= */
  --shadow-xs: 0 1px 1px rgba(7,10,18,0.05);
  --shadow-sm: 0 1px 2px rgba(7,10,18,0.07), 0 1px 1px rgba(7,10,18,0.04);
  --shadow-md: 0 2px 8px rgba(7,10,18,0.09), 0 1px 2px rgba(7,10,18,0.05);
  --shadow-lg: 0 12px 32px rgba(7,10,18,0.12), 0 2px 6px rgba(7,10,18,0.06);
  --shadow-focus: 0 0 0 3px rgba(187,147,101,0.32);   /* copper focus ring */

  /* BORDERS / RADII — precise, small. Hairlines everywhere. */
  --hairline: 1px solid var(--ink-200);
  --hairline-strong: 1px solid var(--ink-300);
  --border-dark: 1px solid var(--ink-700);
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* SPACING — 4 / 8 / 16 / 24 / 32 / 48 / 64 (+ micro + macro) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;

  /* TYPE SCALE — 12/14/16/18/20/24/32/48/64 with line-height + tracking */
  --fs-12: 12px; --lh-12: 16px; --tr-12: 0.02em;
  --fs-14: 14px; --lh-14: 20px; --tr-14: 0.005em;
  --fs-16: 16px; --lh-16: 25px; --tr-16: 0;
  --fs-18: 18px; --lh-18: 28px; --tr-18: 0;
  --fs-20: 20px; --lh-20: 30px; --tr-20: -0.005em;
  --fs-24: 24px; --lh-24: 32px; --tr-24: -0.01em;
  --fs-32: 32px; --lh-32: 40px; --tr-32: -0.015em;
  --fs-48: 48px; --lh-48: 52px; --tr-48: -0.02em;
  --fs-64: 64px; --lh-64: 66px; --tr-64: -0.025em;
}

/* ============================================================================
   GLOBAL TYPE HYGIENE — kill widows/orphans everywhere.
   Headings balance their lines; body text avoids short last lines.
   ============================================================================ */
h1, h2, h3, h4, h5, .bmge-display { text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }

/* ============================================================================
   SEMANTIC TYPE — Headlines: editorial serif. UI/body: grotesque. Data: mono.
   ============================================================================ */
.bmge-display, .bmge h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-64); line-height: var(--lh-64); letter-spacing: var(--tr-64);
  color: var(--ink-900); font-optical-sizing: auto; text-wrap: balance;
}
.bmge h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-48); line-height: var(--lh-48); letter-spacing: var(--tr-48);
  color: var(--ink-900); text-wrap: balance;
}
.bmge h3 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--fs-32); line-height: var(--lh-32); letter-spacing: var(--tr-32); color: var(--ink-900);
}
.bmge h4 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--fs-24); line-height: var(--lh-24); letter-spacing: var(--tr-24); color: var(--ink-900);
}
.bmge h5 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--fs-20); line-height: var(--lh-20); letter-spacing: var(--tr-20); color: var(--ink-900);
}
.bmge p, .bmge .body {
  font-family: var(--font-sans); font-weight: 400;
  font-size: var(--fs-16); line-height: var(--lh-16); color: var(--ink-700); text-wrap: pretty;
}
.bmge .lead {
  font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-20);
  line-height: 32px; color: var(--ink-600);
}
.bmge .serif-lead {
  font-family: var(--font-display); font-weight: 400; font-size: var(--fs-24);
  line-height: 36px; color: var(--ink-700);
}
/* DATA LABEL — mono, upper, tracked */
.bmge .data-label {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-12);
  line-height: var(--lh-12); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500);
}
/* NUMERIC — tabular figures */
.bmge .numeric {
  font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1;
  font-variant-numeric: tabular-nums; color: var(--ink-900);
}
.bmge .caption, .bmge .footnote {
  font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12);
  line-height: var(--lh-12); letter-spacing: var(--tr-12); color: var(--ink-400);
}
.bmge .button-text {
  font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-14);
  line-height: 1; letter-spacing: 0.005em;
}
.bmge code, .bmge .code {
  font-family: var(--font-mono); font-size: 0.92em; background: var(--ink-50);
  border: var(--hairline); border-radius: var(--radius-xs); padding: 0.1em 0.36em; color: var(--ink-800);
}
/* Links read in Teal Nebula — legible on cream, distinct from copper emphasis */
.bmge a { color: var(--teal); text-decoration: none; }
.bmge a:hover { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; }