/* ==========================================================================
   Codenzo — Design tokens
   Palette: deep ink base, electric violet + cyan accents, amber for signal.
   Type: Space Grotesk (display) / Inter (body+UI)
   ========================================================================== */

:root {
  /* Surfaces */
  --bg-0: #0B0D12;
  --bg-1: #12141C;
  --bg-2: #171A24;
  --bg-3: #1E212D;
  --surface-raised: #20232F;
  --border-hair: rgba(237, 239, 244, 0.09);
  --border-strong: rgba(237, 239, 244, 0.18);

  /* Text */
  --text-primary: #EDEFF4;
  --text-secondary: #A7ACBD;
  --text-muted: #6C7186;
  --text-on-accent: #0B0D12;

  /* Accents */
  --violet: #7C5CFF;
  --violet-bright: #9C84FF;
  --violet-dim: #4C3999;
  --cyan: #3DDBD9;
  --cyan-dim: #1F6E6D;
  --amber: #FFB454;
  --amber-dim: #8A6220;
  --coral: #FF6B5E;
  --green-ok: #4ADE80;
  --red-err: #FF6B6B;

  /* Gradients (used once, deliberately — hero + one CTA band) */
  --grad-hero: linear-gradient(135deg, #7C5CFF 0%, #3DDBD9 100%);
  --grad-hero-soft: linear-gradient(135deg, rgba(124,92,255,0.16) 0%, rgba(61,219,217,0.10) 100%);

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

  /* Scale (major third-ish, hand-tuned) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 4rem;
  --fs-5xl: 5.25rem;

  /* Spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* Shadow (used sparingly — depth for raised/3D elements only) */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.28);
  --shadow-pop: 0 4px 12px rgba(0,0,0,0.5), 0 20px 48px rgba(0,0,0,0.35);
  --shadow-glow-violet: 0 0 0 1px rgba(124,92,255,0.4), 0 0 32px rgba(124,92,255,0.25);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-med: 320ms;
  --dur-slow: 620ms;

  --max-width: 1240px;
}

@media (prefers-color-scheme: light) {
  /* Codenzo is designed dark-first (developer-tool aesthetic); we still
     respect a light override if the user forces it via OS/browser. */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--violet); color: white; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}