/**
 * White Lab design tokens — shared across marketing site and protocol console.
 * See docs/adr/0005-design-system.md
 */
:root {
  --wl-bg: #000000;
  --wl-bg-elevated: #070707;
  --wl-bg-soft: #0d0d0d;
  --wl-surface: rgba(255, 255, 255, 0.07);
  --wl-surface-strong: rgba(255, 255, 255, 0.12);
  --wl-surface-glass: rgba(255, 255, 255, 0.075);
  --wl-ink: #ffffff;
  --wl-ink-soft: #f1f1f1;
  --wl-muted: #b8b8b8;
  --wl-muted-2: #818181;
  --wl-line: rgba(255, 255, 255, 0.18);
  --wl-line-strong: rgba(255, 255, 255, 0.38);
  --wl-accent: #ffffff;
  --wl-accent-soft: rgba(255, 255, 255, 0.18);
  --wl-accent-blue: #8ab4ff;
  --wl-accent-mint: #9df7d3;
  --wl-danger: #ff6b6b;
  --wl-success: #8fd694;
  --wl-warn: #e8c547;
  --wl-shadow: 0 34px 110px rgba(0, 0, 0, 0.72);
  --wl-shadow-soft: 0 20px 70px rgba(0, 0, 0, 0.48);
  --wl-glow: 0 0 80px rgba(255, 255, 255, 0.14);

  --wl-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --wl-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --wl-space-1: 4px;
  --wl-space-2: 8px;
  --wl-space-3: 12px;
  --wl-space-4: 16px;
  --wl-space-5: 24px;
  --wl-space-6: 32px;
  --wl-space-7: 48px;
  --wl-space-8: 64px;
  --wl-space-9: 96px;

  --wl-text-xs: 0.76rem;
  --wl-text-sm: 0.88rem;
  --wl-text-base: 1rem;
  --wl-text-lg: 1.25rem;
  --wl-text-xl: clamp(1.8rem, 4vw, 3.4rem);
  --wl-text-hero: clamp(3.2rem, 9vw, 7.6rem);

  --wl-radius-sm: 12px;
  --wl-radius-md: 20px;
  --wl-radius-lg: 32px;
  --wl-radius-xl: 44px;

  --wl-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --wl-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --wl-duration-fast: 180ms;
  --wl-duration-base: 320ms;
  --wl-duration-slow: 680ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --wl-duration-fast: 0ms;
    --wl-duration-base: 0ms;
    --wl-duration-slow: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.wordmark {
  font-family: var(--wl-font-sans);
  font-weight: 560;
  font-style: normal;
  letter-spacing: -0.025em;
  color: var(--wl-ink);
}

.brand-sigil {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  position: relative;
  flex: 0 0 auto;
  border: 1px solid var(--wl-line-strong);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.045)),
    radial-gradient(circle at 38% 18%, rgba(255, 255, 255, 0.34), transparent 48%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 18px 48px rgba(0, 0, 0, 0.42);
}

.brand-sigil::before,
.brand-sigil::after,
.brand-sigil span {
  content: "";
  position: absolute;
  background: var(--wl-ink);
  border-radius: 999px;
  opacity: 0.92;
}

.brand-sigil::before {
  width: 3px;
  height: 17px;
  left: 11px;
  top: 10px;
  transform: skewX(-10deg);
}

.brand-sigil::after {
  width: 3px;
  height: 17px;
  right: 11px;
  top: 10px;
  transform: skewX(10deg);
}

.brand-sigil span {
  width: 14px;
  height: 3px;
  left: 11px;
  top: 20px;
  transform: rotate(-18deg);
}