/* ═══════════════════════════════════════════════════════════════════════════
   ITV — EDITORIAL DARK  ·  theme.css  (global token override layer)
   Loaded LAST so it re-skins every page: home + all SPA sub-pages.
   Charcoal base #191A21 · gold #E8C547 · slate-blue #5C80BC accents
   Fonts: Space Grotesk (display/body) · Geist Mono (data/labels), self-hosted.
   Remaps the legacy --emerald/--bg/--font-* names used across main.css so the
   whole site inherits this look without touching 1440 lines of layout CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SELF-HOSTED FONTS ───────────────────────────────────────────────────── */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/assets/fonts/spacegrotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/assets/fonts/spacegrotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Geist Mono'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('/assets/fonts/geistmono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Geist Mono'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('/assets/fonts/geistmono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ── TOKEN OVERRIDES ─────────────────────────────────────────────────────── */
:root {
  /* Charcoal base */
  --bg:        #191A21;
  --bg-2:      #14151b;
  --bg-card:   #20222b;
  --bg-card2:  #272a35;
  --bg-input:  #1c1d25;
  --bg-nav:    rgba(20,21,27,0.82);
  --bg-panel:  #1e2028;

  /* Gold is the dominant accent — replaces the old royal-blue "emerald" role */
  --emerald:        #E8C547;
  --emerald-dim:    #c9a82f;
  --emerald-bright: #f4d96b;
  --emerald-deep:   #3a3315;
  --emerald-soft:   rgba(232,197,71,0.10);
  --emerald-border: rgba(232,197,71,0.42);
  --emerald-glow:   rgba(232,197,71,0.24);

  /* Slate-blue secondary */
  --diamond:        #5C80BC;
  --diamond-dim:    #44608f;
  --diamond-soft:   rgba(92,128,188,0.12);
  --diamond-border: rgba(92,128,188,0.40);

  /* Keep gold tokens consistent */
  --gold:        #E8C547;
  --gold-soft:   rgba(232,197,71,0.10);
  --gold-border: rgba(232,197,71,0.32);

  /* SQ area re-maps to slate-blue (was diamond/purple) */
  --purple:        var(--diamond);
  --purple-dim:    var(--diamond-dim);
  --purple-bright: #7f9fd4;
  --purple-soft:   var(--diamond-soft);
  --purple-border: var(--diamond-border);

  --green:      #5BD6A0;
  --green-soft: rgba(91,214,160,0.12);
  --red:        #e06b6b;
  --red-soft:   rgba(224,107,107,0.12);
  --red-border: rgba(224,107,107,0.34);

  /* Borders & text — light sage on charcoal */
  --border:    rgba(205,209,196,0.08);
  --border-md: rgba(205,209,196,0.16);
  --border-hi: rgba(205,209,196,0.30);

  --text:   #CDD1C4;
  --text-2: rgba(205,209,196,0.72);
  --text-3: rgba(205,209,196,0.50);
  --text-4: rgba(205,209,196,0.32);

  /* Soft rounding instead of hard pixel edges */
  --radius:    8px;
  --radius-lg: 14px;
  --radius-xl: 22px;

  /* Soft ambient depth */
  --px-sh:    0 10px 34px -16px rgba(0,0,0,0.6);
  --px-sh-lg: 0 30px 70px -28px rgba(0,0,0,0.7);
  --px-sh-sm: 0 4px 14px -6px rgba(0,0,0,0.5);

  /* Smooth, non-stepped timing */
  --t-fast: 0.16s cubic-bezier(.2,.7,.2,1);
  --t:      0.26s cubic-bezier(.2,.7,.2,1);
  --t-slow: 0.5s  cubic-bezier(.2,.7,.2,1);

  /* Fonts */
  --font-logo: 'Space Grotesk','Segoe UI',sans-serif;
  --font-d:    'Space Grotesk','Segoe UI',sans-serif;   /* display / headings */
  --font-b:    'Space Grotesk','Segoe UI',sans-serif;   /* body */
  --font-m:    'Geist Mono','Courier New',monospace;    /* data / labels */
  --font-s:    'Geist Mono','Courier New',monospace;    /* nav / system */
  --font-t:    'Geist Mono','Courier New',monospace;    /* big numerals */
}

/* Rounded corners come back globally; main.css forces 0 on the reset. */
*, *::before, *::after { border-radius: revert; }

html, body { background: var(--bg); }
body { font-family: var(--font-b); letter-spacing: -0.01em; }
img { image-rendering: auto; }              /* photos, not pixel art */
.logo-itv, .nav-logo img, [data-pixel] { image-rendering: pixelated; }

/* Headings: editorial, tight, uppercase where the design calls for it */
h1, h2, h3 { font-family: var(--font-d); font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; }

::selection { background: var(--emerald); color: #30323D; }
:focus-visible { outline: 2px solid var(--emerald-border); outline-offset: 2px; }
::-webkit-scrollbar-thumb { background: var(--emerald-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--emerald-dim); }

/* Selection/accent text reads dark-on-gold, never white-on-gold */
::selection { color: #30323D; }

/* ── NAV — glassy, editorial ─────────────────────────────────────────────── */
.navbar {
  height: 72px; padding: 0 clamp(20px,4vw,48px);
  background: var(--bg-nav);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.navbar.scrolled { box-shadow: 0 10px 30px -18px rgba(0,0,0,0.7); }
.logo-itv { font-family: var(--font-d); font-weight: 700; color: var(--text); letter-spacing: -0.5px; }
.logo-sub { font-family: var(--font-m); color: var(--emerald); letter-spacing: 4px; font-weight: 500; }
.nav-link { font-family: var(--font-m); font-size: 12px; letter-spacing: 1.5px; color: var(--text-2); font-weight: 500; }
.nav-link:hover { color: var(--text); }
.nav-link.active { color: var(--emerald); }

/* Discord login button → gold pill like the design's CONNECT DISCORD */
.btn-discord {
  background: var(--emerald); border: none; color: #30323D !important;
  font-family: var(--font-m); font-weight: 600; letter-spacing: 1px;
  border-radius: 8px; padding: 10px 18px;
}
.btn-discord svg path { fill: #30323D; }
.btn-discord:hover { background: var(--emerald-bright); color: #30323D !important; transform: translateY(-1px); }

/* ── DROPPED ATMOSPHERE: kill the old scanline/space background ───────────── */
.space-bg, .space-bg::before, .space-particles { display: none !important; }
body { background: var(--bg); }

/* ── BUTTONS (global) → rounded, gold primary ────────────────────────────── */
.btn { border-radius: 8px; font-family: var(--font-b); font-weight: 600; letter-spacing: 0; }
.btn-primary, .btn-hero-primary { background: var(--emerald); color: #30323D; border-color: transparent; }
.btn-primary:hover, .btn-hero-primary:hover { background: var(--emerald-bright); color: #30323D; }

/* ── PAGE TITLES on sub-pages ────────────────────────────────────────────── */
.page-title { font-family: var(--font-d); font-weight: 700; letter-spacing: -0.02em; text-transform: none; }
.page-sub  { font-family: var(--font-m); color: var(--text-3); }

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.site-footer { background: var(--bg-2); border-top: 1px solid var(--border); }
.footer-logo .logo-itv { font-family: var(--font-d); font-weight: 700; }
.footer-social-row a:hover { background: var(--emerald); color: #30323D; }

/* Cards / panels across sub-pages get soft rounding + ambient shadow */
.card, .trade-card, .panel, .dash-card { box-shadow: var(--px-sh-sm); }