/* ================================================================
   WeTradex Design System — colors + type tokens
   Dark ecosystem palette: electric blue + cyan on deep navy
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* -------- Surface / neutral (deep navy stack) -------- */
  --bg:            #050911;   /* app background — near-black navy */
  --bg-2:          #07111e;   /* subtle raised base */
  --surface-1:     rgba(13, 27, 47, 0.74);   /* glass panels */
  --surface-2:     rgba(8, 20, 37, 0.92);    /* opaque cards */
  --line-cyan:     rgba(133, 210, 255, 0.12); /* accented hairline */
  --line-neutral:  rgba(255, 255, 255, 0.07); /* default hairline */

  /* -------- Foreground -------- */
  --fg-1:          #f5f8fc;   /* primary text */
  --fg-2:          #a4b3c5;   /* body text */
  --fg-3:          #8fa1b7;   /* muted text */
  --fg-4:          #75869a;   /* subtle labels */
  --fg-5:          #566b82;   /* micro labels / axes */

  /* -------- Brand accents -------- */
  --cyan:          #27d3f2;
  --cyan-soft:     #75ddf5;
  --blue:          #316bff;
  --blue-mid:      #45a7ff;
  --grad-brand:    linear-gradient(100deg, #27d3f2, #45a7ff 48%, #316bff);
  --grad-brand-text: linear-gradient(90deg, #2bd7f3 5%, #48a8ff 55%, #4266ff);

  /* -------- Semantic -------- */
  --success:       #11d68d;   /* LONG / up / positive */
  --success-soft:  #90f5c3;
  --danger:        #ff5570;   /* SHORT / down / negative */
  --danger-soft:   #ff8193;
  --warning:       #ffb545;
  --gold:          #d9b76a;

  /* -------- Shadow / elevation -------- */
  --shadow-lg:     0 30px 80px rgba(0, 0, 0, 0.35);
  --shadow-md:     0 16px 40px rgba(0, 0, 0, 0.24);
  --shadow-sm:     0 8px 20px rgba(0, 0, 0, 0.18);
  --glow-cyan:     0 0 24px rgba(39, 211, 242, 0.15);
  --glow-blue:     0 14px 34px rgba(39, 164, 242, 0.22);
  --glow-success:  0 0 14px rgba(17, 214, 141, 0.7);

  /* -------- Radius scale -------- */
  --radius-xs:     7px;   /* micro pills, toggles */
  --radius-sm:     10px;  /* nav items, small buttons */
  --radius-md:     13px;  /* inputs, chart cells */
  --radius-lg:     18px;  /* cards, panels */
  --radius-xl:     22px;  /* hero cards */
  --radius-2xl:    26px;  /* terminal shell */
  --radius-pill:   999px;

  /* -------- Spacing scale (px) -------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  44px;
  --space-8:  64px;
  --space-9:  94px;   /* section vertical rhythm */

  /* -------- Type families -------- */
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'Space Mono', ui-monospace, monospace;
  --font-serif: 'Instrument Serif', 'Times New Roman', serif;

  /* -------- Motion -------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   180ms;
  --dur-med:    250ms;
  --dur-slow:   400ms;
}

/* ================================================================
   Semantic type — matches the landing’s hierarchy exactly
   ================================================================ */

.wtx-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--cyan-soft);
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.wtx-h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(52px, 6.3vw, 90px);
  line-height: 0.96;
  letter-spacing: -0.065em;
  color: var(--fg-1);
  margin: 0;
}

.wtx-h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(38px, 5vw, 66px);
  line-height: 1;
  letter-spacing: -0.055em;
  color: var(--fg-1);
  margin: 0;
}

.wtx-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 29px;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--fg-1);
  margin: 0;
}

.wtx-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--fg-1);
  margin: 0;
}

.wtx-body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.75;
  color: var(--fg-2);
}

.wtx-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-3);
}

.wtx-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-4);
}

.wtx-micro {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-5);
}

.wtx-mono-number {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.04em;
  color: var(--fg-1);
}

/* Brand gradient text — used inside .wtx-h1 / .wtx-h2 for the highlighted phrase */
.wtx-grad {
  background: var(--grad-brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}