/* ============================================================================
   TRADE3D — shared luxury design system (dark + metallic)
   Linked by every page: index.html (landing), indicators.html, bookmap.html.
   Defines brand tokens, the persistent top nav, and reusable glass/metal bits.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=JetBrains+Mono:wght@300;400;500;600&display=swap');

:root{
  /* base */
  --bg:#060709; --bg-2:#0a0c10; --bg-3:#0e1116;
  --ink:#edf0f5; --ink-2:#a7aeba; --ink-3:#6a717d;
  /* metals */
  --gold:#c9a86a; --gold-bright:#e7d3a1; --gold-dim:#7d6a44;
  --silver:#c4cad4; --platinum:#e9ecf1;
  --gold-grad:linear-gradient(135deg,#e7d3a1 0%,#c9a86a 45%,#9c7f4d 100%);
  --silver-grad:linear-gradient(135deg,#eef1f6 0%,#c4cad4 50%,#8b929e 100%);
  /* signal (kept legible for price) */
  --up:#6fb0ff; --down:#ff6274; --flat:#9aa4b2;
  /* surfaces */
  --glass:rgba(13,15,19,.66); --glass-solid:rgba(11,13,17,.94);
  --hair:rgba(201,168,106,.22);        /* gold hairline */
  --hair-soft:rgba(255,255,255,.07);
  --shadow:0 18px 48px rgba(0,0,0,.55);
  /* type */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --nav-h:56px;
  color-scheme:dark;
}

/* ---------- persistent top nav ---------- */
.t3-nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:1000;
  display:flex; align-items:center; gap:22px; padding:0 clamp(14px,3vw,30px);
  background:linear-gradient(180deg,rgba(6,7,9,.92) 0%,rgba(6,7,9,.66) 70%,rgba(6,7,9,0) 100%);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
  font-family:var(--mono);
}
.t3-nav .brand{
  font-family:var(--serif); font-weight:600; font-size:22px; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; line-height:1;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-right:22px; margin-right:2px; position:relative;
}
.t3-nav .brand::after{ content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:1px; height:20px; background:var(--hair); }
.t3-links{ display:flex; align-items:center; gap:clamp(10px,2.4vw,26px); flex:1; }
.t3-links a{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  color:var(--ink-2); padding:6px 2px; position:relative; transition:color .2s ease;
}
.t3-links a:hover{ color:var(--ink); }
.t3-links a.active{ color:var(--gold-bright); }
.t3-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--gold-grad); }
.t3-nav .t3-live{ margin-left:auto; display:flex; align-items:center; gap:8px; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.t3-nav .t3-live i{ width:7px; height:7px; border-radius:50%; background:#35d07f; box-shadow:0 0 9px #35d07f; display:inline-block; }

@media (max-width:600px){
  .t3-nav{ gap:14px; height:52px; --nav-h:52px; }
  .t3-nav .brand{ font-size:18px; padding-right:14px; }
  .t3-links{ gap:12px; }
  .t3-links a{ font-size:10px; letter-spacing:.12em; }
  .t3-nav .t3-live span{ display:none; }
}

/* reusable metal accents */
.t3-metal-text{ background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.t3-hair{ border:1px solid var(--hair); }