/* ──────────────────────────────────────────────────────────────────────────
   AnchorWithin / VeritySwarm — Reusable Components
   ──────────────────────────────────────────────────────────────────────────
   Layer 3 of 3. Opt-in component primitives, all token-driven.

   Naming convention:
     .aw-*   AnchorWithin (Soul) variants
     .vs-*   VeritySwarm  (Brain) variants

   Components are NAMESPACED on purpose: loading this file does not touch
   any existing class on any existing page. To adopt, a page adds the new
   class to its markup; old classes can be deprecated incrementally.

   What's here (Phase 2 baseline — extend in later phases):
     • Buttons        .aw-btn-primary .aw-btn-ghost  /  .vs-btn-primary .vs-btn-ghost
     • Cards          .aw-card  /  .vs-card
     • Nav shell      .aw-nav   /  .vs-nav     (with glassmorphism)
     • Surfaces       .aw-glass /  .vs-glass   (utility)
     • Glow helpers   .aw-glow-gold .aw-glow-purple  /  .vs-glow-cyan
   ────────────────────────────────────────────────────────────────────────── */

/* ═════════════════════════════════════════════════════════════════════════
   SOUL · AnchorWithin
   ═════════════════════════════════════════════════════════════════════════ */

/* Buttons */
.aw-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0.78rem 1.8rem;
  background: var(--aw-gold);
  color: var(--aw-bg);
  font-family: var(--aw-sans);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  border-radius: var(--r);
  box-shadow: var(--aw-glow-gold);
  transition: background var(--dur-1) var(--ease),
              transform   var(--dur-1) var(--ease),
              box-shadow  var(--dur-2) var(--ease);
}
.aw-btn-primary:hover {
  background: var(--aw-gold-lt);
  transform: translateY(-2px);
  box-shadow: var(--aw-glow-gold-hi);
}
.aw-btn-primary:active { transform: translateY(0); }

.aw-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0.78rem 1.8rem;
  background: transparent;
  color: var(--aw-gold-lt);
  font-family: var(--aw-sans);
  font-weight: 500;
  font-size: 0.9rem;
  border: 1px solid var(--aw-border-hi);
  border-radius: var(--r);
  transition: background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}
.aw-btn-ghost:hover {
  background: var(--aw-gold-glow);
  border-color: var(--aw-gold-lt);
}

/* Card */
.aw-card {
  background: var(--aw-card);
  border: 1px solid var(--aw-border);
  border-radius: var(--r-lg);
  padding: var(--space-6) var(--space-6);
  transition: border-color var(--dur-2) var(--ease),
              box-shadow  var(--dur-2) var(--ease);
}
.aw-card:hover {
  border-color: var(--aw-border-hi);
  box-shadow: var(--shadow-card);
}

/* Single-tier pricing card — slate-gradient surface with cinematic
   hairline at the top edge. Promoted from sanctuary-bell, breatheworld,
   dreamwalk, and thennow in the Phase 4.2 wedge.
   Default accent: gold (glow + hairline).
   Add .is-purple to switch glow + hairline to purple (used by dreamwalk).
   Pages may override padding via a more-specific selector if a denser
   pricing layout requires it. */
.aw-price-card {
  position: relative;
  padding: var(--space-8);
  background: linear-gradient(180deg, var(--aw-lift) 0%, var(--aw-card) 100%);
  border: 1px solid var(--aw-border-hi);
  border-radius: var(--r-lg);
  box-shadow: var(--aw-glow-gold);
  overflow: hidden;
}
.aw-price-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--aw-gold-lt), transparent);
}
.aw-price-card.is-purple {
  box-shadow: var(--aw-glow-purple);
}
.aw-price-card.is-purple::before {
  background: linear-gradient(90deg, transparent, var(--aw-purple-lt), transparent);
}

/* Nav — full-width sticky glass shell that hosts a constrained
   .aw-nav-inner. Together they form the standard Soul nav pattern,
   promoted from sanctuary-bell + breatheworld in the Phase 4.1 wedge.
   Adopters supply a logo, links, and CTA inside .aw-nav-inner. */
.aw-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--aw-glass-bg-hi);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--aw-border);
}
.aw-nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
  height: 56px;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.aw-nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--aw-serif);
  font-size: 1.05rem;
  color: var(--aw-gold-lt);
  letter-spacing: .03em;
}
.aw-nav-anchor { font-size: .95rem; opacity: .7; }
.aw-nav-links {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  font-family: var(--aw-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--aw-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.aw-nav-links a { transition: color var(--dur-1) var(--ease); }
.aw-nav-links a:hover { color: var(--aw-gold-lt); }

/* Utility glass / glow */
.aw-glass {
  background: var(--aw-glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--aw-glass-border);
  border-radius: var(--r-lg);
}
.aw-glow-gold   { box-shadow: var(--aw-glow-gold); }
.aw-glow-purple { box-shadow: var(--aw-glow-purple); }

/* Safety-critical alert button — fixed-position pulsing red circle.
   Promoted from breatheworld's #panicBtn in the Phase 4.1 wedge.
   Use with an inner .aw-alert-label span for the lowercase action label.
   The pulse animation respects prefers-reduced-motion.
   The keyframe rgba is the same red as --aw-red-dim (rgba 239,68,68);
   it's literal because CSS keyframes need explicit alpha stops. */
.aw-alert-btn {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--aw-red-dim);
  border: 3px solid var(--aw-red-dim);
  color: var(--aw-cream);
  font-family: var(--aw-sans);
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 0 0 0 var(--aw-red-dim);
  animation: aw-alert-pulse 2.6s infinite;
  transition: transform var(--dur-1) var(--ease);
}
.aw-alert-btn:hover { transform: scale(1.07); }
.aw-alert-btn:focus-visible {
  outline: 2px solid var(--aw-cream);
  outline-offset: 4px;
}
.aw-alert-label {
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .92;
  font-weight: 700;
}
@keyframes aw-alert-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
  70%  { box-shadow: 0 0 0 16px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .aw-alert-btn { animation: none; }
  .aw-alert-btn:hover { transform: none; }
}


/* ═════════════════════════════════════════════════════════════════════════
   BRAIN · VeritySwarm
   ═════════════════════════════════════════════════════════════════════════ */

/* Buttons */
.vs-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0.78rem 1.6rem;
  background: var(--vs-cyan);
  color: var(--vs-bg);
  font-family: var(--vs-mono);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--r);
  box-shadow: var(--vs-glow-cyan);
  transition: background var(--dur-1) var(--ease),
              transform   var(--dur-1) var(--ease),
              box-shadow  var(--dur-2) var(--ease);
}
.vs-btn-primary:hover {
  background: var(--vs-cyan-lt);
  transform: translateY(-1px);
  box-shadow: var(--vs-glow-cyan-hi);
}
.vs-btn-primary:active { transform: translateY(0); }

.vs-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0.78rem 1.6rem;
  background: transparent;
  color: var(--vs-cyan-lt);
  font-family: var(--vs-mono);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  border: 1px solid var(--vs-border-hi);
  border-radius: var(--r);
  transition: background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}
.vs-btn-ghost:hover {
  background: var(--vs-cyan-glow);
  border-color: var(--vs-cyan);
}

/* Card */
.vs-card {
  background: var(--vs-card);
  border: 1px solid var(--vs-border);
  border-radius: var(--r);
  padding: var(--space-6) var(--space-6);
  font-family: var(--vs-sans);
  transition: border-color var(--dur-2) var(--ease),
              box-shadow  var(--dur-2) var(--ease);
}
.vs-card:hover {
  border-color: var(--vs-border-hi);
  box-shadow: var(--shadow-card);
}

/* Nav shell — console-style, less ornate than Soul */
.vs-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 var(--space-6);
  background: var(--vs-glass-bg-hi);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--vs-border);
  font-family: var(--vs-mono);
  font-size: var(--text-sm);
}

/* Utility glass / glow */
.vs-glass {
  background: var(--vs-glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--vs-glass-border);
  border-radius: var(--r);
}
.vs-glow-cyan { box-shadow: var(--vs-glow-cyan); }