/*
 * chainsounding.com — shared design tokens
 * Loaded by every page. Inline <style> blocks remain authoritative
 * for component-level rules; this file owns global primitives and utilities.
 */

:root {
  /* Page / surface */
  --bg:      #0a0e14;
  --surface: #111822;
  --border:  #1e2d3d;

  /* Accent */
  --accent-green:  #22c55e;
  --accent-orange: #f59e0b;

  /* Text hierarchy */
  --text-hi:  #f1f5f9;
  --text-mid: rgba(241,245,249,.6);
  --text-lo:  rgba(241,245,249,.32);
}

/* ── Canonical nav ───────────────────────────────────────────────────────── */
/* body-prefixed rules carry higher specificity than page-level nav{} / .cls{} */
body nav{position:sticky;top:0;z-index:100;background:var(--bg-nav,#080f1e);border-bottom:1px solid var(--bd,rgba(255,255,255,.07));padding:0 40px;display:flex;align-items:center;justify-content:space-between;height:58px;backdrop-filter:blur(12px)}
body .nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
body .logo-img{height:48px;width:48px;object-fit:contain;border-radius:6px}
body .logo-wordmark{font-family:'Sora',sans-serif;font-size:14px;font-weight:600;color:var(--t1,#f1f5f9);letter-spacing:-.01em}
body .nav-links{display:flex;align-items:center;gap:6px;list-style:none}
body .nav-links a{font-size:13px;color:var(--t3,rgba(241,245,249,.32));text-decoration:none;padding:5px 10px;border-radius:8px;transition:color .15s,background .15s}
body .nav-links a:hover{color:var(--t1,#f1f5f9);background:rgba(255,255,255,.05)}
body .nav-cta{font-size:12px;font-weight:500;background:var(--gold,#f59e0b);color:#0f172a;padding:7px 16px;border-radius:3px;text-decoration:none;transition:opacity .15s;letter-spacing:.01em;white-space:nowrap}
body .nav-cta:hover{opacity:.88}
@media(max-width:767px){
  body nav{padding:0 16px}
  body .nav-links{display:none}
  body .logo-img{height:40px;width:40px}
}

/* ── Grid texture ────────────────────────────────────────────────────────── */
/* Apply per-section — not forced globally. */
.grid-bg {
  background-image:
    linear-gradient(rgba(30,45,61,.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,45,61,.25) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── Hero glow ───────────────────────────────────────────────────────────── */
/* Wrap element needs position:relative. Glow sits behind children via z-index. */
.glow-green {
  position: relative;
  isolation: isolate;
}
.glow-green::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle 400px at 50% 50%, rgba(34,197,94,.10), transparent 70%);
  pointer-events: none;
  z-index: -1;
}