/* ============================================================
   BOMForge brand layer for BOMAtlas.
   One file re-skins every legacy token vocabulary (atlas ink/paper,
   design-tokens gold, homepage sand/rust/coal, admin inline vars)
   onto the BOMForge system: velvet-rope neutrals, Geist type,
   monochrome ink interactive primary (black on light, white on dark),
   Old Glory forge red reserved for the wordmark. Map segment hues are
   DATA colors, not chrome, and stay chromatic.

   Loaded via @import at the TOP of each token-source stylesheet.
   Imported rules cascade BEFORE the host file's own rules, so every
   override here uses :root:root (0,2,0) to beat the legacy :root
   definitions (0,1,0) regardless of source order. Do not "simplify"
   the doubled selector.

   Theme behavior matches the site: light/dark follows the OS, and
   the manual toggle pins it via html[data-theme] (theme-init reads
   localStorage 'ba-theme'). Admin pages set data-theme="dark".
   ============================================================ */

/* ---- Geist (BOMForge type; Inter stays as fallback) ---- */
@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/geist-sans/Geist-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/geist-sans/Geist-Bold.woff2') format('woff2');
  font-weight: 700 800;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2');
  font-weight: 500 700;
  font-display: swap;
}

:root:root {
  /* ---- BOMForge canon ---- */
  --bf-black: #0a0a0a;
  --bf-surface: #141414;
  --bf-elevated: #1a1a1a;
  --bf-border: #242424;
  --bf-text: #f5f5f5;
  --bf-text-2: #a3a3a3;
  --bf-text-3: #8a8a8a;
  --bf-blue: #3b82f6;
  --bf-blue-bright: #60a5fa;
  --bf-blue-soft: #93c5fd;
  --forge-navy: #002868;
  --forge-red: #bf0a30;
  --forge-red-hover: #d4213f;
  --forge-red-deep: #8a0722;
  --forge-gold: #ffd700;
  --bf-red-gradient: linear-gradient(135deg, #bf0a30 0%, #d4213f 55%, #8a0722 100%);

  /* ---- Type: every legacy font token -> Geist ---- */
  --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family: var(--font-sans);
  --font-display: var(--font-sans);
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-data: var(--font-mono);

  /* ---- design-tokens vocabulary (dark product surfaces; these pages
     ship dark in both OS modes, BOMForge is dark-first) ---- */
  --color-primary: #f5f5f5;
  --color-primary-hover: #ffffff;
  --color-primary-dark: #d4d4d4;
  --color-primary-light: #ffffff;
  --color-primary-alpha-10: rgba(245, 245, 245, 0.1);
  --color-primary-alpha-15: rgba(245, 245, 245, 0.15);
  --color-primary-alpha-20: rgba(245, 245, 245, 0.2);
  --color-primary-alpha-40: rgba(245, 245, 245, 0.4);
  --color-primary-subtle: rgba(245, 245, 245, 0.08);
  --color-primary-muted: rgba(245, 245, 245, 0.15);
  --color-primary-glow: rgba(245, 245, 245, 0.35);
  --color-elite: var(--forge-gold);
  --color-elite-hover: #eac400;
  --color-elite-light: #ffe23d;
  --gradient-primary: var(--bf-red-gradient);
  --gradient-secondary: linear-gradient(135deg, #a3a3a3 0%, #d4d4d4 50%, #f5f5f5 100%);
  --gradient-dark: linear-gradient(135deg, #0a0a0a 0%, #161616 100%);

  --bg-void: var(--bf-black);
  --bg-base: var(--bf-black);
  --bg-surface: var(--bf-surface);
  --bg-elevated: var(--bf-elevated);
  --bg-overlay-subtle: #1f1f1f;
  --bg-primary: var(--bf-black);
  --bg-secondary: var(--bf-surface);
  --bg-tertiary: var(--bf-elevated);
  --bg-card: var(--bf-surface);
  --bg-hover: #1f1f1f;
  --bg-modal: rgba(10, 10, 10, 0.95);

  --text-primary: var(--bf-text);
  --text-secondary: var(--bf-text-2);
  --text-muted: var(--bf-text-3);
  --text-disabled: #6b6b6b;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-gold: rgba(191, 10, 48, 0.35);
  --border-gold-strong: rgba(191, 10, 48, 0.55);
  --border-color: var(--bf-border);
  --border-focus: #f5f5f5;

  /* ---- admin inline vocabulary (same names, pinned dark) ---- */
  --accent-hover: #262626;

  /* ---- homepage / warm vocabulary, LIGHT values (default) ---- */
  --white: #ffffff;
  --gray-50: #f7f8fa;
  --gray-100: #eff1f4;
  --gray-200: #e2e5ea;
  --gray-300: #cfd4db;
  --gray-400: #9aa1ab;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #333a45;
  --gray-800: #22262e;
  --gray-900: #16181d;
  --sand-50: #f5f6f8;
  --sand-100: #edeef1;
  --sand-200: #dcdfe4;
  --coal-900: #101318;
  --coal-800: #181c23;
  --coal-700: #242a33;
  --rust-500: var(--forge-red);
  --rust-600: var(--forge-red-deep);
  --gold-500: #a97e08;
  --blue-500: #0a0a0a;
  --blue-600: #262626;
  --blue-700: #404040;
  --blue-50: #f0f0f2;
  --warm-rust-500: var(--forge-red);
  --warm-rust-600: var(--forge-red-deep);
  --warm-rust-400: var(--forge-red-hover);

  /* ---- Map segment hues (validated: lightness band, chroma, CVD,
     contrast — vs white AND #141414). Must match map-globe.js. ---- */
  --seg-trade: #bf0a30;
  --seg-cc: #0d9488;
  --seg-pub: #2563eb;
  --seg-priv: #a16207;
  --seg-research: #7c3aed;
  --seg-business: #be185d;

  /* ---- Status, LIGHT values. Namespaced --status-* rather than --success,
     which industrial-theme.css already declares at a plain :root and would
     race. All six values clear AA against the paper they sit on. ---- */
  --status-ok: #15803d;
  --status-warn: #a16207;
  --status-bad: var(--forge-red);

  /* ---- atlas ink/paper vocabulary, LIGHT values (default) ---- */
  --ink: #1a2029;
  --ink-2: #4b5563;
  --ink-3: #5c6570;
  --ink-meta: #5a6472;
  --line: rgba(16, 20, 26, 0.09);
  --line-strong: rgba(16, 20, 26, 0.17);
  --paper: #ffffff;
  --paper-2: #f5f6f8;
  --accent: #0a0a0a;
  --accent-2: #262626;
  --glass: 255, 255, 255;
  --paper-rgb: 255, 255, 255;
}

/* ---- Dark values: OS preference ---- */
@media (prefers-color-scheme: dark) {
  :root:root {
    --ink: var(--bf-text);
    --ink-2: var(--bf-text-2);
    --ink-3: var(--bf-text-3);
    --ink-meta: #9a9a9a;
    --seg-trade: #d4213f;
    --seg-cc: #0d9488;
    --seg-pub: #2563eb;
    --seg-priv: #a16207;
    --seg-research: #8b5cf6;
    --seg-business: #f472b6;

    --status-ok: #4ade80;
    --status-warn: #fbbf24;
    --status-bad: #f26a86;

    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.17);
    --paper: var(--bf-black);
    --paper-2: var(--bf-surface);
    --accent: #f5f5f5;
    --accent-2: #d4d4d4;
    --accent-hover: #d4d4d4;
    --glass: 10, 10, 10;
    --paper-rgb: 10, 10, 10;

    --white: #0a0a0a;
    --gray-50: #141414;
    --gray-100: #1a1a1a;
    --gray-200: #242424;
    --gray-300: #2e2e2e;
    --gray-400: #8a8a8a;
    --gray-500: #a3a3a3;
    --gray-600: #c7c7c7;
    --gray-700: #dcdcdc;
    --gray-800: #ededed;
    --gray-900: #f5f5f5;
    --sand-50: #141414;
    --sand-100: #1a1a1a;
    --sand-200: #242424;
    --coal-900: #f5f5f5;
    --coal-800: #ededed;
    --coal-700: #dcdcdc;
    --rust-500: #e8365b;
    --rust-600: #f26a86;
    --gold-500: #d9b23a;
    --blue-50: rgba(255, 255, 255, 0.08);
    --blue-500: #f5f5f5;
    --blue-600: #d4d4d4;
    --blue-700: #bfbfbf;
  }
}

/* ---- Manual toggle pins (beats the media query) ---- */
:root:root[data-theme='light'] {
  --ink: #1a2029;
  --ink-2: #4b5563;
  --ink-3: #5c6570;
  --ink-meta: #5a6472;
  --seg-trade: #bf0a30;
  --seg-cc: #0d9488;
  --seg-pub: #2563eb;
  --seg-priv: #a16207;
  --seg-research: #7c3aed;
  --seg-business: #be185d;
  --line: rgba(16, 20, 26, 0.09);
  --line-strong: rgba(16, 20, 26, 0.17);
  --paper: #ffffff;
  --paper-2: #f5f6f8;
  --accent: #0a0a0a;
  --accent-2: #262626;
  --accent-hover: #262626;
  --glass: 255, 255, 255;
  --paper-rgb: 255, 255, 255;

  --white: #ffffff;
  --gray-50: #f7f8fa;
  --gray-100: #eff1f4;
  --gray-200: #e2e5ea;
  --gray-300: #cfd4db;
  --gray-400: #9aa1ab;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #333a45;
  --gray-800: #22262e;
  --gray-900: #16181d;
  --sand-50: #f5f6f8;
  --sand-100: #edeef1;
  --sand-200: #dcdfe4;
  --coal-900: #101318;
  --coal-800: #181c23;
  --coal-700: #242a33;
  --rust-500: var(--forge-red);
  --rust-600: var(--forge-red-deep);
  --gold-500: #a97e08;
  --blue-50: #f0f0f2;
  --blue-500: #0a0a0a;
  --blue-600: #262626;
  --blue-700: #404040;
}

:root:root[data-theme='dark'] {
  --ink: var(--bf-text);
  --ink-2: var(--bf-text-2);
  --ink-3: var(--bf-text-3);
  --ink-meta: #9a9a9a;
  --seg-trade: #d4213f;
  --seg-cc: #0d9488;
  --seg-pub: #2563eb;
  --seg-priv: #a16207;
  --seg-research: #8b5cf6;
  --seg-business: #f472b6;
  --status-ok: #4ade80;
  --status-warn: #fbbf24;
  --status-bad: #f26a86;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.17);
  --paper: var(--bf-black);
  --paper-2: var(--bf-surface);
  --accent: #f5f5f5;
  --accent-2: #d4d4d4;
  --accent-hover: #d4d4d4;
  --glass: 10, 10, 10;
  --paper-rgb: 10, 10, 10;

  --white: #0a0a0a;
  --gray-50: #141414;
  --gray-100: #1a1a1a;
  --gray-200: #242424;
  --gray-300: #2e2e2e;
  --gray-400: #8a8a8a;
  --gray-500: #a3a3a3;
  --gray-600: #c7c7c7;
  --gray-700: #dcdcdc;
  --gray-800: #ededed;
  --gray-900: #f5f5f5;
  --sand-50: #141414;
  --sand-100: #1a1a1a;
  --sand-200: #242424;
  --coal-900: #f5f5f5;
  --coal-800: #ededed;
  --coal-700: #dcdcdc;
  --rust-500: #e8365b;
  --rust-600: #f26a86;
  --gold-500: #d9b23a;
  --blue-50: rgba(255, 255, 255, 0.08);
  --blue-500: #f5f5f5;
  --blue-600: #d4d4d4;
  --blue-700: #bfbfbf;
}

/* ---- Behavior polish (BOMForge feel) ---- */
html body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
::selection {
  background: var(--ink);
  color: var(--paper);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Wordmark: "BOM" foreground + second word in the forge red
   gradient, matching the BOMForge lockup on every header. ---- */
.hp-logo span,
.hp-footer-logo span,
.bomatlas-logo-accent {
  background: var(--bf-red-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #d4213f;
}

/* ── Scale tokens ────────────────────────────────────────────
   These lived in design-tokens.css, which NOTHING on the atlas shell ever
   loaded: the map pages pull exactly two stylesheets, and both of them
   @import this file and nothing else. So the space, radius and text scales
   declared and unreachable, and every rule in atlas-shell.css and
   filter-panel.css was written as a raw literal — 16 distinct font sizes, 25
   spacing values and 11 radii, none of them on a scale. Publishing the scale
   HERE is what makes the token the cheaper thing to reach for next time.
   Values are copied verbatim from design-tokens.css; this is a second
   doorway onto the same scale, not a second scale. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;

  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;
}

/* ── Mobile nav drawer ───────────────────────────────────────
   Built by /assets/js/mobile-nav.js as a <dialog> opened with showModal().
   It lives here rather than in atlas-shell.css because the header ships on
   two different stylesheets (atlas-shell.css and homepage.css) and both need
   it: without these rules the dialog falls back to the UA's centred modal
   box, which is not a drawer.

   No z-index anywhere below. showModal() puts the element in the top layer,
   which is above every stacking context on the page by definition, including
   the fixed, backdrop-filtered header that trapped the old hand-rolled
   drawer. */
@media (max-width: 768px) {
  .hp-drawer {
    position: fixed;
    /* Full viewport, not top:56px. The backdrop covers the page header
       regardless, so leaving a strip of dimmed, inert header above the drawer
       only looked like a bug; the drawer carries its own rail instead. */
    inset: 0;
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100vh;
    height: 100svh;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    overflow: visible;
    /* rail + nav stacked; the nav takes the remainder */
    display: flex;
    flex-direction: column;
  }
  .hp-drawer:not([open]) {
    display: none;
  }
  .hp-drawer > .hp-nav {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Structure shared by both header stylesheets: one scrolling region and one
     pinned footer, so "Get Started" can never scroll under Safari's toolbar
     and the drawer fills the surface instead of floating half way down it. */
  .hp-drawer .hp-nav-scroll {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: inherit;
  }
  .hp-drawer .hp-nav-auth {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 8px;
    padding: 12px 20px;
    padding-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 12px));
    border-top: 1px solid var(--line, rgba(16, 20, 26, 0.09));
    background: inherit;
  }
  .hp-drawer .hp-nav-auth a {
    border-top: 0;
    justify-content: center;
    min-height: 48px;
    border-radius: 8px;
    font-weight: 600;
  }
  /* The rail mirrors the header the drawer replaces, so the surface reads as
     a takeover rather than an overlay, and it carries the close control that
     the page hamburger can no longer be once the dialog is modal. */
  .hp-drawer-rail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    height: var(--header-h);
    padding: 0 var(--space-4);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .hp-drawer-brand {
    font-size: 18px;
    /* Sit on the same optical line as the header wordmark it replaces: the
       rail pads 16 and the wordmark's own box pulls back 6, same as
       .hp-header-inner does. Set explicitly rather than inherited, because a
       6px drift between the two surfaces is exactly what reads as sloppy
       when the drawer opens over the header. */
    margin-left: -6px;
  }
  .hp-drawer-close {
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    margin-right: -10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--ink);
  }
  .hp-drawer-close svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
  }
}

/* ── Drawer wrappers above the breakpoint ────────────────────
   mobile-nav.js groups the nav into a scroll region, a pinned auth footer
   and one inner wrapper per dropdown panel. Above 768px none of those must
   exist as far as layout is concerned, or the desktop header row lays out
   two block wrappers instead of its links and every nav item collapses
   against its neighbour. This lives here, not in atlas-shell.css, because
   the header ships on two stylesheets and only one of them had the rule:
   /companies/ and /university-procurement/ shipped with a jammed desktop
   nav until this was moved. */
@media (min-width: 769px) {
  .hp-nav-scroll,
  .hp-nav-auth,
  .hp-nav-panel-inner {
    display: contents;
  }
}