/* ==========================================================================
   CLICKZAIN — DESIGN TOKENS
   Signature concept: "Signal Line" — a growth trajectory motif (thin glowing
   line charts) threads through the hero and section dividers, echoing the
   brand's performance-marketing DNA. Numbered sequence markers are reserved
   only for genuinely sequential content (Process, Journey timeline).
   ========================================================================== */

:root{
  /* ---- Color: base ---- */
  --bg:            #080808;
  --surface:       #111111;
  --surface-2:     #15181A;
  --surface-3:     #1B1F1D;
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);

  /* ---- Color: text ---- */
  --text:          #F3F5F4;
  --text-muted:    #9BA3A0;
  --text-faint:    #676E6C;

  /* ---- Color: brand accent (locked by brief) ---- */
  --accent:        #00FF88;
  --accent-2:      #00C9A7;   /* deeper emerald partner, used in gradients */
  --accent-ink:    #001A0F;   /* text-on-accent */
  --accent-glow:   rgba(0,255,136,.35);
  --accent-glow-soft: rgba(0,255,136,.12);

  /* ---- Gradients ---- */
  --grad-accent:   linear-gradient(135deg, #00FF88 0%, #00C9A7 100%);
  --grad-radial:   radial-gradient(60% 60% at 50% 40%, rgba(0,255,136,.16), transparent 70%);
  --grad-surface:  linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));

  /* ---- Typography ---- */
  --font-display: 'Clash Display', 'Segoe UI', sans-serif;
  --font-body:    'Switzer', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --fs-9xl: clamp(3.4rem, 6.4vw, 6.4rem);
  --fs-8xl: clamp(2.7rem, 5vw, 4.6rem);
  --fs-7xl: clamp(2.2rem, 3.6vw, 3.4rem);
  --fs-6xl: clamp(1.8rem, 2.6vw, 2.5rem);
  --fs-5xl: clamp(1.5rem, 2vw, 1.9rem);
  --fs-lg:  1.2rem;
  --fs-md:  1rem;
  --fs-sm:  .875rem;
  --fs-xs:  .75rem;

  /* ---- Spacing scale ---- */
  --sp-3xs: .25rem;
  --sp-2xs: .5rem;
  --sp-xs:  .75rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2.5rem;
  --sp-xl:  4rem;
  --sp-2xl: 6.5rem;
  --sp-3xl: 9rem;

  /* ---- Radius ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-full: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: .25s;
  --dur-med: .5s;
  --dur-slow: .9s;

  /* ---- Layout ---- */
  --container: 1240px;
  --header-h: 84px;

  /* ---- Shadow / glass ---- */
  --shadow-lg: 0 30px 80px -20px rgba(0,0,0,.6);
  --glass-bg: rgba(17,17,17,.55);
  --glass-border: rgba(255,255,255,.08);
}