/* ============================================================
   SCUP LABS — DESIGN TOKENS
   Single source of truth. Edit here → updates everywhere.
   ============================================================ */

:root {

  /* ── COLORS ──────────────────────────────────────────────── */

  /* Backgrounds */
  --bg-0:        #080C14;   /* deepest black-navy */
  --bg-1:        #0A0F1E;   /* page background */
  --bg-2:        #0D1526;   /* section alt */
  --bg-3:        #111E38;   /* card background */
  --bg-glass:    rgba(13,21,38,0.7);

  /* Brand gradient — blue-to-cyan-green ("behavior." palette) */
  --grad-start:  #1B6FFF;   /* electric blue */
  --grad-mid:    #00C4FF;   /* cyan */
  --grad-end:    #00E5A0;   /* mint green */

  /* Accent shortcuts */
  --accent-blue: #1B6FFF;
  --accent-cyan: #00C4FF;
  --accent-mint: #00E5A0;

  /* Text */
  --text-0:      #F0F4FF;   /* primary white */
  --text-1:      #9AAAC4;   /* secondary / muted */
  --text-2:      #4A5A78;   /* very muted / hints */

  /* Borders */
  --border-0:    rgba(255,255,255,0.06);
  --border-1:    rgba(255,255,255,0.12);
  --border-acc:  rgba(0,196,255,0.25);

  /* ── TYPOGRAPHY ──────────────────────────────────────────── */
  --ff-display:  'Space Grotesk', sans-serif;
  --ff-body:     'Inter', sans-serif;
  --ff-mono:     'JetBrains Mono', monospace;

  /* Type scale */
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   22px;
  --fs-xl:   32px;
  --fs-2xl:  48px;
  --fs-3xl:  64px;
  --fs-4xl:  88px;

  /* ── SPACING ─────────────────────────────────────────────── */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   48px;
  --space-xl:   80px;
  --space-2xl:  120px;

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --max-width:   1140px;
  --nav-height:  72px;

  /* ── RADII ───────────────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-pill: 100px;

  /* ── SHADOWS ─────────────────────────────────────────────── */
  --shadow-card:  0 24px 60px rgba(0,0,0,0.5);
  --shadow-glow:  0 0 40px rgba(0,196,255,0.15);
  --shadow-mint:  0 0 40px rgba(0,229,160,0.15);
  --shadow-blue:  0 0 60px rgba(27,111,255,0.2);

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.18s;
  --t-med:  0.3s;
  --t-slow: 0.5s;
}

/* ── BRAND GRADIENT UTILITY ─────────────────────────────────── */
.grad-text {
  background: linear-gradient(135deg, var(--grad-start) 0%, var(--grad-mid) 50%, var(--grad-end) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}