/* ================================================================
   TECHLEADIQ — DESIGN TOKENS
   Import this first in every CSS file that needs variables
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  /* ── Palette ── */
  --void:        #050810;
  --ink:         #090D1A;
  --deep:        #0C1120;
  --layer:       #111827;
  --card:        #141d2e;
  --card-hi:     #1a2438;

  /* ── Borders ── */
  --rim:         rgba(255,255,255,0.055);
  --rim-md:      rgba(255,255,255,0.09);
  --rim-hi:      rgba(255,255,255,0.16);

  /* ── Brand ── */
  --teal:        #02C397;
  --teal-bright: #03dba8;
  --teal-glow:   rgba(2,195,151,0.15);
  --teal-soft:   rgba(2,195,151,0.08);
  --teal-mid:    rgba(2,195,151,0.22);

  /* ── Text ── */
  --tx-1:  #F0F6FF;
  --tx-2:  #8898B8;
  --tx-3:  #4A5A75;
  --tx-4:  #243048;

  /* ── Fonts ── */
  --f-sans: 'Outfit', sans-serif;
  --f-mono: 'JetBrains Mono', monospace;

  /* ── Radii ── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-pill: 100px;

  /* ── Shadows ── */
  --sh-card:  0 1px 3px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.35);
  --sh-float: 0 8px 40px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
  --sh-teal:  0 8px 32px rgba(2,195,151,0.22);

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring:   cubic-bezier(0.175, 0.885, 0.32, 1.1);

  /* ── Layout ── */
  --max-w:  1160px;
  --nav-h:  68px;
}