/* ===========================================================================
   BOMBRING DESIGN TOKENS
   Lifted from styletile.html — single source of truth.
   When tokens change, update the styletile too (or vice versa).
   =========================================================================== */

:root {
  /* ---- GRAYSCALE BASE (clustered from source mockups) ---- */
  --bomb-void:      #070709;
  --bomb-black:     #121113;
  --bomb-charcoal:  #1D1D1E;
  --bomb-iron:      #2B2B2C;
  --bomb-graphite:  #3D3D3D;
  --bomb-ash:       #545454;
  --bomb-concrete:  #777776;
  --bomb-bone:      #B2AFA7;
  --bomb-fog:       #CAC6BD;

  /* ---- ACCENT: CYAN (visor luminescence) ---- */
  --bomb-visor-glow:  #CAE1DD;
  --bomb-visor:       #84B5C0;
  --bomb-visor-deep:  #4A7A85;

  /* ---- ACCENT: AMBER (temple LED + transmission marker) ---- */
  --bomb-led-glow:    #E3DEA9;
  --bomb-amber:       #D27A16;
  --bomb-amber-burn:  #F39518;

  /* ---- ACCENT: OXBLOOD (patch chevron) ---- */
  --bomb-blood-deep:  #3A1B1B;
  --bomb-blood:       #7A2828;
  --bomb-blood-live:  #B33838;

  /* ---- TYPE STACK ---- */
  --font-display:     'Quantico', 'Arial Black', sans-serif;
  --font-accent:      'Michroma', sans-serif;
  --font-pixel-jp:    'DotGothic16', monospace;
  --font-pixel-num:   'Bitcount Single', monospace;
  --font-body:        'DM Sans', system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', 'Courier New', monospace;

  /* ---- SPATIAL TOKENS ---- */
  --border-hairline:  1px;
  --frame-inset:      24px;
  --grain-opacity:    0.04;
  --nav-strip-width:  72px;
  --content-max:      1400px;
}

/* ===========================================================================
   GLOBAL RESET
   =========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background: var(--bomb-black);
  color: var(--bomb-bone);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

::selection {
  background: var(--bomb-visor);
  color: var(--bomb-black);
}

/* ===========================================================================
   ATMOSPHERIC OVERLAYS — scanlines + grain (z-index 100/101)
   =========================================================================== */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(255,255,255,0.012) 2px,
    rgba(255,255,255,0.012) 3px
  );
  pointer-events: none;
  z-index: 100;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: var(--grain-opacity);
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 101;
}

/* ===========================================================================
   SIGNATURE FRAME — 24px hairline inset with TX corner marks
   =========================================================================== */

.bomb-frame {
  position: fixed;
  inset: var(--frame-inset);
  border: var(--border-hairline) solid var(--bomb-bone);
  opacity: 0.4;
  pointer-events: none;
  z-index: 50;
}

.bomb-frame__corner {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--bomb-bone);
  background: var(--bomb-black);
  padding: 2px 6px;
  text-transform: uppercase;
}

.bomb-frame__corner--bottom-center {
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
}

.bomb-frame__corner--top-left {
  top: -7px;
  left: 24px;
}

.bomb-frame__corner--top-right {
  top: -7px;
  right: 24px;
}

/* ===========================================================================
   MOBILE TOKEN OVERRIDES
   ---------------------------------------------------------------------------
   Below 720px the desktop chrome ratios stop working:
   - 24px frame inset eats 6.7% of the viewport on each side
   - Corner marks compete for the same horizontal space
   - The left nav strip can't survive in 360-420px viewports without
     becoming unreadable
   So we hide the decorative chrome and rely on the new mobile-top-bar
   nav defined in page.css. The frame itself stays as a thin ornamental
   border at 8px inset.
   =========================================================================== */

@media (max-width: 720px) {
  :root {
    --frame-inset: 8px;
    --nav-strip-width: 0px;
  }

  .bomb-frame {
    opacity: 0.25;
  }

  .bomb-frame__corner {
    display: none;
  }
}