/* ==========================================================================
   BITQUERY — Official brand system
   Extracted from "Bitquery x Deep Work" Figma (Styles & Components / Brand
   Guidelines). Use these tokens for ALL Bitquery work.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* ---- Content ---- */
  --bq-white:#ffffff;
  --bq-grey:#aab0bc;          /* secondary text */
  --bq-dark-grey:#7e8696;     /* muted text — lifted for AA contrast on #06090d */

  /* ---- Backgrounds ---- */
  --bq-page-bg:#06090d;       /* rgb 6,9,13  — page */
  --bq-card-bg:#0c121c;       /* dark navy card surface */
  --bq-navy:#111c32;          /* rgb 17,28,50 — header/navy panels */
  --bq-navy-deep:#142739;     /* rgb 20,39,57 — gradient stop */
  --bq-line:rgba(255,255,255,0.10);
  --bq-line-2:rgba(255,255,255,0.06);

  /* ---- Buttons ---- */
  --bq-cta:#93254b;           /* rgb 147,37,75  — CTA Primary */
  --bq-cta-hover:#af3e76;     /* rgb 175,62,118 — CTA Primary :hover */
  --bq-cta-border:#621832;    /* rgb 98,24,50   — CTA Secondary outline */

  /* ---- Brand accent palette ---- */
  --bq-pink:#f93f9c;          /* rgb 249,63,156 — hot pink */
  --bq-pink-soft:#f788c0;     /* rgb 247,136,192 */
  --bq-magenta:#af3e76;       /* rgb 175,62,118 */
  --bq-maroon:#6c1c44;        /* rgb 108,28,68 */
  --bq-teal:#00d8dd;          /* rgb 0,216,221 — cyan */
  --bq-teal-muted:#51becc;    /* rgb 81,190,204 */
  --bq-blue:#0029ff;          /* rgb 0,41,255 — supplementary blue */
  --bq-blue-deep:#0500df;     /* rgb 5,0,223 */

  /* ---- Gradients (brand) ---- */
  --bq-gradient:linear-gradient(96deg,#f93f9c 0%,#af3e76 46%,#00d8dd 100%);
  --bq-gradient-dimmed:linear-gradient(96deg,#af3e76 0%,#6c1c44 60%,#3db3bf 100%);
  --bq-gradient-blue:linear-gradient(180deg,#0029ff 0%,#142739 100%);
  --bq-gradient-card:linear-gradient(180deg,#06090d 0%,#142739 100%);
  --bq-gradient-accent:linear-gradient(135deg,#1e575d 0%,#4d1430 100%); /* teal→maroon */

  /* ---- Type families ---- */
  --bq-font:'DM Sans',system-ui,sans-serif;        /* headings + body */
  --bq-mono:'JetBrains Mono',ui-monospace,monospace;

  /* ---- Radius ---- */
  --bq-radius-btn:4px;
  --bq-radius-card:14px;
}

/* ==========================================================================
   Typography scale (DM Sans). Headings = Medium(500); Body = Regular(400).
   ========================================================================== */
.bq-giant{font-family:var(--bq-font);font-weight:500;font-size:60px;line-height:60px;letter-spacing:0;color:var(--bq-white);}
.bq-h1{font-family:var(--bq-font);font-weight:500;font-size:36px;line-height:42px;letter-spacing:-0.8px;color:var(--bq-white);}
.bq-h2{font-family:var(--bq-font);font-weight:500;font-size:36px;line-height:42px;letter-spacing:-0.8px;color:var(--bq-white);}
.bq-h3{font-family:var(--bq-font);font-weight:500;font-size:22px;line-height:26px;letter-spacing:-0.1px;color:var(--bq-white);}
.bq-h4{font-family:var(--bq-font);font-weight:500;font-size:18px;line-height:24px;letter-spacing:-0.2px;color:var(--bq-white);}
.bq-body-l{font-family:var(--bq-font);font-weight:400;font-size:22px;line-height:26px;letter-spacing:0.2px;}
.bq-body-m{font-family:var(--bq-font);font-weight:400;font-size:18px;line-height:22px;letter-spacing:-0.2px;}
.bq-body-m-semibold{font-weight:500;}
.bq-body-s{font-family:var(--bq-font);font-weight:400;font-size:15px;line-height:22px;letter-spacing:0.3px;}
.bq-body-xs{font-family:var(--bq-font);font-weight:400;font-size:13px;line-height:18px;letter-spacing:0.3px;}
.bq-tag{font-family:var(--bq-font);font-weight:500;font-size:10px;line-height:12px;letter-spacing:1px;text-transform:uppercase;}

.bq-gradient-text{background:var(--bq-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ==========================================================================
   Buttons — radius 4, padding 16/24, DM Sans Medium 18
   ========================================================================== */
.bq-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--bq-font);font-weight:500;font-size:18px;line-height:22px;letter-spacing:-0.2px;
  border-radius:var(--bq-radius-btn);padding:16px 24px;border:1px solid transparent;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;white-space:nowrap;text-decoration:none;}
.bq-btn-primary{background:var(--bq-cta);color:var(--bq-white);}
.bq-btn-primary:hover{background:var(--bq-cta-hover);}
.bq-btn-secondary{background:transparent;color:var(--bq-white);border-color:var(--bq-cta-border);}
.bq-btn-secondary:hover{background:rgba(147,37,75,0.14);}
.bq-btn-sm{font-size:15px;line-height:22px;padding:11px 18px;}