/* Pitchbender — design tokens
 * Cosmic / sacred frequency aesthetic.
 * Deep night-ink background, magenta + purple + cyan as primary triad,
 * soft luminous white for type. All values used across surfaces.
 */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  /* ── Brand color triad ─────────────────────────────────── */
  --pb-magenta: #FF2E92;
  --pb-magenta-soft: #FF6FB5;
  --pb-magenta-deep: #B81E6B;

  --pb-purple: #7B2FFF;
  --pb-purple-soft: #A982FF;
  --pb-purple-deep: #4A1799;

  --pb-cyan: #00F0FF;
  --pb-cyan-soft: #7AF6FF;
  --pb-cyan-deep: #008A99;

  /* ── Cosmic neutrals ───────────────────────────────────── */
  --pb-ink:        #07041A;   /* deepest night */
  --pb-night:      #0D0826;   /* primary bg */
  --pb-dusk:       #1A0F3A;   /* surface 1 */
  --pb-dusk-2:     #261856;   /* surface 2 */
  --pb-haze:       #3B2877;   /* borders / dividers */
  --pb-mist:       #6B5BA8;   /* muted text */
  --pb-moon:       #B8AEDB;   /* low-emphasis text */
  --pb-star:       #E8E0FF;   /* high-emphasis text */
  --pb-aura:       #F8F4FF;   /* pure white-violet */

  /* ── Semantic ─────────────────────────────────────────── */
  --pb-bg:         var(--pb-night);
  --pb-fg:         var(--pb-star);
  --pb-fg-mute:    var(--pb-moon);
  --pb-fg-dim:     var(--pb-mist);
  --pb-accent:     var(--pb-magenta);
  --pb-accent-2:   var(--pb-purple);
  --pb-accent-3:   var(--pb-cyan);
  --pb-border:     rgba(184, 174, 219, 0.12);
  --pb-border-strong: rgba(184, 174, 219, 0.22);

  /* ── Glows ────────────────────────────────────────────── */
  --pb-glow-magenta: 0 0 32px rgba(255, 46, 146, 0.45), 0 0 64px rgba(255, 46, 146, 0.20);
  --pb-glow-purple:  0 0 32px rgba(123, 47, 255, 0.45), 0 0 64px rgba(123, 47, 255, 0.18);
  --pb-glow-cyan:    0 0 32px rgba(0, 240, 255, 0.40), 0 0 64px rgba(0, 240, 255, 0.18);
  --pb-glow-soft:    0 0 24px rgba(184, 174, 219, 0.15);

  /* ── Gradients ────────────────────────────────────────── */
  --pb-grad-aurora:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(255, 46, 146, 0.22), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 70%, rgba(0, 240, 255, 0.18), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(123, 47, 255, 0.30), transparent 70%);
  --pb-grad-spectrum:
    linear-gradient(90deg, var(--pb-magenta) 0%, var(--pb-purple) 50%, var(--pb-cyan) 100%);
  --pb-grad-spectrum-soft:
    linear-gradient(90deg, var(--pb-magenta-soft) 0%, var(--pb-purple-soft) 50%, var(--pb-cyan-soft) 100%);

  /* ── Type ────────────────────────────────────────────── */
  --pb-font-display: 'Instrument Serif', 'Cormorant Garamond', 'Times New Roman', serif;
  --pb-font-body:    'Geist', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --pb-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ── Radii ───────────────────────────────────────────── */
  --pb-r-sm:   6px;
  --pb-r-md:   10px;
  --pb-r-lg:   16px;
  --pb-r-xl:   22px;
  --pb-r-2xl:  32px;
  --pb-r-pill: 999px;

  /* ── Shadows ─────────────────────────────────────────── */
  --pb-shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --pb-shadow-2: 0 6px 24px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
  --pb-shadow-3: 0 20px 60px rgba(0,0,0,0.55), 0 6px 20px rgba(0,0,0,0.4);
  --pb-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.3);

  /* ── Motion ──────────────────────────────────────────── */
  --pb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pb-ease-emph: cubic-bezier(0.16, 1, 0.3, 1);
  --pb-dur-fast: 140ms;
  --pb-dur: 220ms;
  --pb-dur-slow: 360ms;
}

/* Reset-ish for inside artboards */
.pb-root, .pb-root * {
  box-sizing: border-box;
}
.pb-root {
  font-family: var(--pb-font-body);
  color: var(--pb-fg);
  background: var(--pb-bg);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.45;
}

.pb-display {
  font-family: var(--pb-font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.0;
}
.pb-display-italic {
  font-family: var(--pb-font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.0;
}
.pb-mono {
  font-family: var(--pb-font-mono);
  font-feature-settings: 'tnum';
}
.pb-eyebrow {
  font-family: var(--pb-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pb-fg-mute);
}

/* Shared button base */
.pb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--pb-border-strong);
  background: rgba(255,255,255,0.03);
  color: var(--pb-fg);
  font-family: var(--pb-font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: var(--pb-r-pill);
  cursor: pointer;
  transition: background var(--pb-dur) var(--pb-ease), border-color var(--pb-dur) var(--pb-ease), transform var(--pb-dur-fast) var(--pb-ease);
}
.pb-btn:hover { background: rgba(255,255,255,0.07); border-color: var(--pb-border-strong); }
.pb-btn:active { transform: scale(0.98); }
.pb-btn--primary {
  background: linear-gradient(135deg, var(--pb-magenta) 0%, var(--pb-purple) 100%);
  border-color: transparent;
  color: white;
  box-shadow: var(--pb-glow-magenta);
}
.pb-btn--primary:hover {
  background: linear-gradient(135deg, var(--pb-magenta-soft) 0%, var(--pb-purple-soft) 100%);
  box-shadow: var(--pb-glow-magenta), 0 0 60px rgba(255, 46, 146, 0.3);
}
.pb-btn--ghost {
  background: transparent;
  border-color: var(--pb-border);
  color: var(--pb-fg-mute);
}

/* Card */
.pb-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.005) 100%);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-r-lg);
  backdrop-filter: blur(20px);
}

/* Sacred ring divider — concentric circles motif */
.pb-ring {
  position: absolute;
  border: 1px solid var(--pb-border);
  border-radius: 50%;
  pointer-events: none;
}

/* Marquee number style for Hz */
.pb-hz {
  font-family: var(--pb-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Animated keyframes shared across surfaces */
@keyframes pb-pulse-glow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
@keyframes pb-slow-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes pb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes pb-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}