/* QMI Redesign v2 — GQ Presentation color scheme + fonts on original dark base
   Overrides styles.css accents and typography. Load AFTER styles.css */

:root {
  /* ——— GQ Accent System ——— */
  --accent: #2E6FF2;
  --accent-light: #5B9BF7;
  --accent-purple: #7B5CFF;
  --accent-cyan: #00C2FF;
  --accent-magenta: #C84DFF;

  /* ——— Surfaces — slightly blue-tinted dark (from GQ deck) ——— */
  --bg-0: #050508;
  --bg-1: #0C0C14;
  --bg-2: #14141F;
  --bg-3: #1C1C2A;
  --line: #2A2A3A;
  --line-soft: #1A1A28;

  /* ——— Text — cooler whites ——— */
  --fg-0: #F0F0F8;
  --fg-1: #C8C8D8;
  --fg-2: #8080A0;
  --fg-3: #505068;

  /* ——— Typography — GQ deck uses Manrope + Inter ——— */
  --font-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'Azeret Mono', ui-monospace, monospace;

  /* ——— Asset accents — same but harmonized with blue base ——— */
  --a-btc: #2E6FF2;
  --a-btc-soft: #5B9BF7;
  --a-eth: #C43032;
  --a-eth-soft: #E25558;
  --a-gold: #D4AF37;
  --a-gold-soft: #E8C760;
  --a-silver: #C0C8D0;
  --a-silver-soft: #DDE3E9;
  --a-sol: #7B5CFF;
  --a-sol-soft: #A78BFA;

  /* ——— Status ——— */
  --pos: oklch(0.78 0.14 150);
  --neg: oklch(0.70 0.18 25);
}

/* ——— Typography overrides ——— */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
}
em, .display-italic {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 300;
  color: var(--accent-light);
}

/* ——— Eyebrow dot uses GQ blue ——— */
.eyebrow::before { background: var(--accent); }

/* ——— Cards — GQ style: subtle glass ——— */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
}
.card:hover, .m-card:hover, .kpi:hover {
  border-color: rgba(46,111,242,0.3);
  box-shadow: 0 8px 32px rgba(46,111,242,0.06);
}

/* ——— Buttons — GQ blue primary ——— */
.btn-primary {
  background: #FFFFFF;
  color: #0A0A12;
  border-color: #FFFFFF;
}
.btn-primary:hover {
  background: #E8E8F0;
  border-color: #E8E8F0;
  color: #0A0A12;
}

/* ——— Grid background — blue tint ——— */
.bg-grid {
  opacity: 0.15;
  background-image:
    linear-gradient(rgba(46,111,242,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,111,242,0.06) 1px, transparent 1px);
  background-size: 120px 120px;
}

/* ——— Team monogram gradients — GQ palette ——— */
.team-mono-bg::after {
  background: linear-gradient(135deg, rgba(46,111,242,0.06) 0%, rgba(123,92,255,0.06) 100%);
}