/* ─────────────────────────────────────────────────────────────
   Venkings — Design tokens
   Brand blue (#2c84bf) preserved for logo render.
   Neon palette drives the UI/CTAs/glows.
───────────────────────────────────────────────────────────── */

:root {
  /* Ink — backgrounds, surfaces */
  --ink-0: #07070b;
  --ink-1: #0f0f17;
  --ink-2: #161622;
  --ink-3: #1f1f2e;

  /* Glass overlay */
  --glass: rgba(255, 255, 255, 0.04);
  --glass-strong: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.1);

  /* Brand (original logo color) */
  --brand-blue: #2c84bf;
  --brand-gray: #606060;

  /* Neon accent palette */
  --neon-blue: #00d4ff;
  --neon-blue-soft: rgba(0, 212, 255, 0.18);
  --neon-purple: #b14eff;
  --neon-purple-soft: rgba(177, 78, 255, 0.18);
  --neon-lime: #c6ff3a;

  /* Text */
  --text-hi: #f4f5fb;
  --text-mid: #a4a8bd;
  --text-lo: #62677e;

  /* Signature gradient — appears on CTAs, headlines, glow seams */
  --grad-signature: linear-gradient(135deg, #00d4ff 0%, #b14eff 100%);
  --grad-vape:      linear-gradient(135deg, #b14eff 0%, #ff4ec4 100%);
  --grad-glow:      radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.35), transparent 60%);

  /* Spacing scale (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 */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Type scale */
  --t-xs:   0.75rem;   /* 12 */
  --t-sm:   0.875rem;  /* 14 */
  --t-base: 1rem;      /* 16 */
  --t-lg:   1.125rem;  /* 18 */
  --t-xl:   1.375rem;  /* 22 */
  --t-2xl:  1.75rem;   /* 28 */
  --t-3xl:  2.5rem;    /* 40 */
  --t-4xl:  3.75rem;   /* 60 */
  --t-5xl:  clamp(3rem, 8vw, 7rem); /* hero */

  /* Type families */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-med:  320ms;
  --t-slow: 640ms;

  /* Shadows / glows */
  --glow-blue:   0 0 24px rgba(0, 212, 255, 0.4), 0 0 48px rgba(0, 212, 255, 0.15);
  --glow-purple: 0 0 24px rgba(177, 78, 255, 0.4), 0 0 48px rgba(177, 78, 255, 0.15);

  /* Layout */
  --container: 1280px;
  --container-narrow: 920px;
  --nav-h: 72px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ── Base ──────────────────────────────────────────────────── */
body {
  background: var(--ink-0);
  color: var(--text-hi);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--neon-blue); color: var(--ink-0); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-hi);
}

.mono { font-family: var(--font-mono); letter-spacing: 0.04em; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--neon-blue);
}

.gradient-text {
  background: var(--grad-signature);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}