/* ============================================================================
   SB Audio FX — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow & motion.
   Dark, high-energy "audio" theme: true black + electric blue→violet, cyan pop.
   ========================================================================== */

:root {
  /* ---- Surfaces (true-black, blue-tinted) ---- */
  --sb-surface-0: #000205;          /* page background */
  --sb-surface-1: #080b12;          /* cards */
  --sb-surface-2: #0e131d;          /* raised / modal */
  --sb-surface-3: #161d2b;          /* hover / inputs */
  --sb-layer-hover: rgba(77, 163, 255, .06);
  --sb-layer-active: rgba(77, 163, 255, .12);

  /* ---- Ink ---- */
  --sb-ink-primary: #f6f9ff;
  --sb-ink-secondary: #b9c6da;
  --sb-ink-muted: #7e8aa0;
  --sb-ink-faint: #56607a;

  /* ---- Brand (electric blue) ---- */
  --sb-brand: #2e80ff;              /* electric blue */
  --sb-brand-hover: #1b6cf5;
  --sb-brand-bright: #4da3ff;
  --sb-cyan: #38bdf8;               /* cyan-blue highlight */
  --sb-brand-grad: linear-gradient(135deg, #1e6bff 0%, #00c2ff 100%);
  --sb-brand-grad-soft: linear-gradient(135deg, rgba(30,107,255,.20) 0%, rgba(0,194,255,.16) 100%);
  --sb-cyan-grad: linear-gradient(135deg, #00c2ff 0%, #2e80ff 100%);

  /* ---- Status ---- */
  --sb-success: #34d399;
  --sb-success-soft: rgba(52, 211, 153, .14);
  --sb-warning: #fbbf24;
  --sb-warning-soft: rgba(251, 191, 36, .14);
  --sb-danger: #f87171;
  --sb-danger-soft: rgba(248, 113, 113, .14);

  /* ---- Borders ---- */
  --sb-border: rgba(120, 160, 220, .12);
  --sb-border-strong: rgba(140, 175, 230, .22);
  --sb-border-brand: rgba(46, 128, 255, .50);
  --sb-focus-ring: #4da3ff;

  /* ---- Typography ---- */
  --sb-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sb-text-xs: .75rem;
  --sb-text-sm: .875rem;
  --sb-text-base: 1rem;
  --sb-text-lg: 1.125rem;
  --sb-text-xl: 1.25rem;
  --sb-text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  --sb-text-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);
  --sb-text-4xl: clamp(2.25rem, 1.6rem + 3vw, 3.25rem);
  --sb-text-5xl: clamp(2.75rem, 1.8rem + 4.4vw, 4.25rem);
  --sb-leading-tight: 1.1;
  --sb-leading-snug: 1.3;
  --sb-leading-normal: 1.6;
  --sb-tracking-tight: -0.02em;
  --sb-tracking-wide: 0.04em;

  /* ---- Spacing (4px base) ---- */
  --sb-space-1: 4px;
  --sb-space-2: 8px;
  --sb-space-3: 12px;
  --sb-space-4: 16px;
  --sb-space-5: 20px;
  --sb-space-6: 24px;
  --sb-space-8: 32px;
  --sb-space-10: 40px;
  --sb-space-12: 48px;
  --sb-space-16: 64px;
  --sb-space-20: 80px;
  --sb-space-24: 96px;
  --sb-space-32: 128px;

  /* ---- Radius ---- */
  --sb-radius-sm: 8px;
  --sb-radius-md: 14px;
  --sb-radius-lg: 20px;
  --sb-radius-xl: 28px;
  --sb-radius-pill: 999px;

  /* ---- Shadow ---- */
  --sb-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sb-shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
  --sb-shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
  --sb-shadow-brand: 0 10px 40px rgba(46, 128, 255, .40);
  --sb-highlight-top: inset 0 1px 0 rgba(255, 255, 255, .06);

  /* ---- Layout ---- */
  --sb-maxw: 1180px;
  --sb-maxw-narrow: 760px;

  /* ---- Motion ---- */
  --sb-dur-fast: 140ms;
  --sb-dur-med: 240ms;
  --sb-dur-slow: 420ms;
  --sb-ease: cubic-bezier(.4, 0, .2, 1);
  --sb-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--sb-font);
  font-size: var(--sb-text-base);
  line-height: var(--sb-leading-normal);
  color: var(--sb-ink-secondary);
  background-color: var(--sb-surface-0);
  background-image:
    radial-gradient(72% 52% at 50% -12%, rgba(30, 107, 255, .16), transparent 64%),
    radial-gradient(42% 30% at 90% 4%, rgba(0, 194, 255, .07), transparent 70%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--sb-ink-primary);
  line-height: var(--sb-leading-tight);
  letter-spacing: var(--sb-tracking-tight);
  margin: 0 0 var(--sb-space-4);
  font-weight: 800;
}

p { margin: 0 0 var(--sb-space-4); }

a { color: var(--sb-cyan); text-decoration: none; transition: color var(--sb-dur-fast) var(--sb-ease); }
a:hover { color: #67e8f9; }

img, svg { max-width: 100%; height: auto; display: block; }

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

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

/* ---- Glass material ---- */
:root {
  --sb-glass-bg: rgba(18, 22, 34, .55);
  --sb-glass-border: rgba(255, 255, 255, .10);
  --sb-glass-blur: saturate(160%) blur(18px);
}

/* ---- Scroll reveal ---- */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--sb-ease-out), transform .7s var(--sb-ease-out); will-change: opacity, transform; }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}