/* =============================================================================
   DESIGN TOKENS — StockPay

   Two measured sources: the brand banner (royal #075CF0 falling to azure
   #3FBBF9, which is exactly the gradient behind the terminal render) and the
   aave.com layout language — rounded 32px blocks inset from the viewport, 99px
   pills, a 72px headline at −0.05em, and one word per headline set in serif
   italic. Colour is carried by whole blocks, never by decoration.
   ========================================================================== */

:root {
  /* ---- brand, sampled from assets/banner.jpg ----------------------------- */
  --blue:      #0b5bef;   /* primary action, links, the italic word on paper */
  --blue-deep: #0742b8;
  --azure:     #3fbbf9;   /* the bottom of the banner gradient */
  --blue-soft: rgba(11, 91, 239, 0.08);
  --blue-line: rgba(11, 91, 239, 0.22);
  --hero-grad: linear-gradient(178deg, #0559ef 0%, #1a86f5 52%, #3fbbf9 100%);

  /* ---- grounds ------------------------------------------------------------ */
  --page:   #eef0f4;   /* what shows between the blocks */
  --paper:  #ffffff;
  --tint:   #eaf2fe;   /* the pale block */
  --dark:   #070a12;

  /* ---- ink ---------------------------------------------------------------- */
  --ink:     #14161c;
  --ink-2:   #40464f;
  --muted:   #6b7280;
  --muted-2: #9aa1ac;
  --on-dark:      #ffffff;
  --on-dark-2:    rgba(255, 255, 255, 0.66);
  --on-dark-3:    rgba(255, 255, 255, 0.42);

  --line:   rgba(20, 22, 28, 0.10);
  --line-2: rgba(20, 22, 28, 0.18);
  --line-d: rgba(255, 255, 255, 0.16);

  /* ---- market semantics --------------------------------------------------- */
  --up:        #0f9f6a;
  --up-soft:   rgba(15, 159, 106, 0.12);
  --down:      #e03a56;
  --down-soft: rgba(224, 58, 86, 0.12);

  /* ---- type --------------------------------------------------------------- */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif:   'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- radii -------------------------------------------------------------- */
  --r-block: 32px;
  --r-card:  22px;
  --r-sm:    12px;
  --r-md:    16px;
  --r-pill:  99px;

  --sh-sm: 0 1px 2px rgba(20, 22, 28, 0.05);
  --sh-md: 0 18px 40px -22px rgba(20, 22, 28, 0.28);
  --sh-lg: 0 40px 80px -34px rgba(7, 66, 184, 0.35);

  /* ---- layout ------------------------------------------------------------- */
  --maxw:    1180px;
  --inset:   12px;                       /* how far the blocks sit from the edge */
  --pad-x:   clamp(22px, 5vw, 76px);
  --pad-y:   clamp(56px, 7.5vw, 118px);
  --nav-h:   72px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}