/* =============================================================================
   dark.css — Shared base styles for Tobacco Nexus dark-theme pages
   Included by: index.html · about.html · graph.html · map.html
   ============================================================================= */

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ─── DESIGN TOKENS ─── */
:root{
  --bg:#07070e;
  --surface:#0f0f18;
  --surface2:#161622;
  --border:#1a1a26;
  --border2:#2a2a3a;
  --text:#f0ece4;
  --text2:#9a9390;
  --text3:#484450;
  --accent:#c0392b;
  --mono:'IBM Plex Mono',monospace;
  --sans:'IBM Plex Sans',sans-serif;
  --serif:'Playfair Display',Georgia,serif;
}

/* ─── BASE BODY ─── */
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  line-height:1.6;
  position:relative;
}

/* Grid texture overlay
   Suppress on full-screen pages: body::before{content:none} */
body::before{
  content:'';
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:80px 80px;
  opacity:.35;
}

/* ─── TOPBAR ─── */
.topbar{
  position:relative;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 3rem;
  border-bottom:1px solid var(--border);
}
.topbar-id{
  font-family:var(--mono);font-size:9px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--text3);
}
.topbar-id span{color:var(--accent);margin-right:.5em}
.topbar-nav{display:flex;align-items:center;gap:.35rem}

/* ─── NAV BUTTONS ─── */
.t-btn{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  padding:.4rem .9rem;border-radius:3px;text-decoration:none;
  transition:all .15s;border:1px solid transparent;
}
.t-ghost{color:var(--text3)}
.t-ghost:hover{color:var(--text2);border-color:var(--border)}
.t-about{color:var(--text2);border-color:var(--border)}
.t-about:hover{color:var(--text);border-color:var(--text3)}
.t-outline{color:var(--accent);border-color:rgba(192,57,43,.4)}
.t-outline:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ─── BOTTOMBAR ─── */
.bottombar{
  position:relative;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 3rem;
  border-top:1px solid var(--border);
}