/* ============================================================
   Jeremy Degryse — Design Tokens (v2)
   Dark fintech / crypto.com inspired
   Deep navy ground · electric blue signal · geometric sans
   ============================================================ */

/* Display + Body: Onest — geometric, contemporary, fintech-clean
   Mono:           JetBrains Mono — receipts, code, meta */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* =========================================================
     COLOR — Dark fintech. Near-black navy + electric blue.
     ========================================================= */

  /* Ground — the canvas. Slightly blue-shifted blacks. */
  --bg:           #06080F;   /* page background — deep night */
  --bg-2:         #0B0E18;   /* alt section bg */
  --surface:      #11151F;   /* card surface, default */
  --surface-2:    #181D2A;   /* elevated card / nested */
  --surface-3:    #232938;   /* hover surface */

  /* Text — high contrast white on near-black */
  --fg:           #F4F6FA;   /* primary text */
  --fg-2:         #C7CCDA;   /* secondary text */
  --fg-3:         #8B92A8;   /* tertiary, meta, captions */
  --fg-4:         #5A6178;   /* muted, dividers in text */

  /* Signal — Electric blue. Crypto/fintech confident. */
  --signal:       #1652F0;   /* primary accent */
  --signal-hover: #2E66FF;   /* hover */
  --signal-glow:  #6E8FFF;   /* highlight / glow */
  --signal-soft:  rgba(22, 82, 240, 0.14);  /* tint background */
  --signal-ink:   #B8C8FF;   /* text on signal-soft */

  /* Borders */
  --bd:           rgba(255, 255, 255, 0.06);   /* default hairline */
  --bd-strong:    rgba(255, 255, 255, 0.12);   /* stronger */
  --bd-signal:    rgba(22, 82, 240, 0.40);     /* signal border */

  /* Light surfaces — used rarely, for testimonials / contrast bands */
  --light:        #F4F6FA;
  --light-2:      #E6E9F1;
  --light-ink:    #06080F;

  /* Semantic — restrained */
  --success:      #19C285;
  --warning:      #F0A91A;
  --danger:       #FF4F5E;
  --info:         var(--signal);

  /* YouTube red — reserved for video-play affordances ONLY */
  --yt-red:       #FF2A33;

  /* =========================================================
     TYPE
     ========================================================= */
  --font-display: 'Onest', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'Onest', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Modular scale */
  --t-xs:    12px;
  --t-sm:    14px;
  --t-base:  16px;
  --t-md:    18px;
  --t-lg:    22px;
  --t-xl:    28px;
  --t-2xl:   36px;
  --t-3xl:   48px;
  --t-4xl:   64px;
  --t-5xl:   80px;
  --t-6xl:  104px;

  --lh-tight:  1.0;
  --lh-snug:   1.15;
  --lh-normal: 1.45;
  --lh-loose:  1.65;

  --tr-tight:  -0.035em;
  --tr-snug:   -0.025em;
  --tr-normal:  0;
  --tr-wide:    0.04em;
  --tr-widest:  0.16em;

  /* =========================================================
     SPACING — 4px base
     ========================================================= */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10: 128px;
  --s-11: 192px;

  /* =========================================================
     RADII — generous, fintech-style
     ========================================================= */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* =========================================================
     SHADOWS — restrained on dark, mostly glow-style
     ========================================================= */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 0 1px rgba(22, 82, 240, 0.20), 0 12px 48px rgba(22, 82, 240, 0.24);

  /* =========================================================
     LAYOUT
     ========================================================= */
  --container:        1240px;
  --container-narrow:  720px;
  --container-wide:   1440px;

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   ============================================================ */

body, .body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.h-display, h1.display {
  font-family: var(--font-display);
  font-size: clamp(52px, 8.5vw, var(--t-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: 600;
  color: var(--fg);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: 600;
  color: var(--fg);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  font-weight: 600;
  color: var(--fg);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  color: var(--fg);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  text-wrap: pretty;
  max-width: 65ch;
}

.lede {
  font-family: var(--font-body);
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  color: var(--fg-2);
  font-weight: 400;
}

.meta, small {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--signal-glow);
  font-weight: 500;
}

code, kbd, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-2);
  padding: 0.1em 0.4em;
  border-radius: var(--r-xs);
  color: var(--fg);
}

a {
  color: var(--fg);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--signal-glow);
}

/* Highlight color — used in headlines for the one bold accent word */
.hi {
  color: var(--signal-glow);
}