/* VeloCoach AI — Brand Tokens 2026 */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand colors */
  --vc-cyan:      #11C5F5;
  --vc-cyan-dim:  #0AA2CC;
  --vc-blue:      #0B1730;
  --vc-blue-2:    #142346;
  --vc-orange:    #FF6B2C;
  --vc-black:     #050816;
  --vc-slate:     #A7B3C5;
  --vc-slate-dim: #6B7689;

  /* Data viz support */
  --vc-green:     #37D67A;
  --vc-red:       #FF4D5A;
  --vc-yellow:    #FFC247;

  /* Surfaces */
  --surface-0: #050816;
  --surface-1: #0B1226;
  --surface-2: #111B36;
  --hairline:  rgba(167, 179, 197, 0.12);
  --hairline-strong: rgba(167, 179, 197, 0.22);

  /* Type */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
}

html, body { background: var(--vc-black); color: #E7ECF3; }
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }

/* Reusable bits */
.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
.display { font-family: var(--font-display); letter-spacing: -0.02em; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vc-cyan);
}

/* Subtle topo / contour background */
.bg-topo {
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(17,197,245,0.10), transparent 60%),
    radial-gradient(800px 500px at -10% 100%, rgba(255,107,44,0.06), transparent 60%),
    repeating-linear-gradient(115deg, rgba(167,179,197,0.04) 0 1px, transparent 1px 38px),
    linear-gradient(180deg, #050816 0%, #07112B 100%);
}
.bg-contour {
  background-image:
    radial-gradient(60% 80% at 50% 50%, transparent 38%, rgba(17,197,245,0.06) 39% 39.5%, transparent 40%),
    radial-gradient(50% 70% at 50% 50%, transparent 48%, rgba(17,197,245,0.05) 49% 49.4%, transparent 50%),
    radial-gradient(40% 60% at 50% 50%, transparent 58%, rgba(17,197,245,0.04) 59% 59.3%, transparent 60%),
    linear-gradient(180deg, #050816, #07112B);
}

/* Glass card */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid var(--hairline);
  border-radius: 14px;
  backdrop-filter: blur(8px);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  padding: 14px 22px; border-radius: 999px; cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease;
  text-decoration: none;
}
.btn-primary { background: var(--vc-cyan); color: #04121A; border: 0; }
.btn-primary:hover { background: #2DD3FF; }
.btn-accent  { background: var(--vc-orange); color: #1A0A02; border: 0; }
.btn-ghost   { background: transparent; color: #E7ECF3; border: 1px solid var(--hairline-strong); }
.btn-ghost:hover { border-color: var(--vc-cyan); color: var(--vc-cyan); }

/* Selection */
::selection { background: var(--vc-cyan); color: #04121A; }