:root {
  color-scheme: dark;
  --bp-bg: #09090b;
  --bp-bg-deep: #060608;
  --bp-surface: rgba(24, 24, 27, .94);
  --bp-surface-raised: rgba(34, 32, 29, .96);
  --bp-surface-soft: rgba(199, 204, 212, .055);
  --bp-line: rgba(231, 217, 187, .15);
  --bp-line-strong: rgba(224, 191, 111, .34);
  --bp-text: #f8f6f0;
  --bp-muted: #aaa8a3;
  --bp-platinum: #c7ccd4;
  --bp-gold: #d6b461;
  --bp-gold-light: #f3da91;
  --bp-gold-dark: #99702b;
  --bp-positive: #8fc5a8;
  --bp-danger: #cf8278;
  --bp-radius: 18px;
  --bp-radius-inner: 14px;
  --bp-radius-control: 12px;
  --bp-font: "Avenir Next", "Segoe UI Variable Text", "SF Pro Text", system-ui, sans-serif;
  --bp-display: "Segoe UI Variable Display", "Avenir Next", "SF Pro Display", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; background: var(--bp-bg-deep); }
body {
  min-width: 320px;
  color: var(--bp-text);
  font-family: var(--bp-font);
  letter-spacing: 0;
  background:
    radial-gradient(ellipse at 12% -8%, rgba(173, 128, 52, .20), transparent 39%),
    radial-gradient(ellipse at 94% 20%, rgba(190, 198, 211, .10), transparent 37%),
    linear-gradient(145deg, #151315 0%, var(--bp-bg) 47%, #101116 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: url("./assets/premium-noise.svg");
}

h1, h2, h3, h4 { font-family: var(--bp-display); letter-spacing: 0; text-wrap: balance; }
p { text-wrap: pretty; }

.bp-surface {
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius);
  background: linear-gradient(145deg, var(--bp-surface-raised), var(--bp-surface) 58%, rgba(12, 12, 15, .97));
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), inset 0 -1px rgba(0, 0, 0, .62), 0 24px 60px rgba(0, 0, 0, .28);
}

.bp-eyebrow {
  margin: 0;
  color: var(--bp-gold-light);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bp-button,
.bp-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 18px;
  border-radius: var(--bp-radius-control);
  font: 700 14px/1.2 var(--bp-font);
  text-decoration: none;
  cursor: pointer;
}

.bp-button {
  color: #17130c;
  border: 1px solid rgba(246, 219, 146, .66);
  background: linear-gradient(145deg, #f3da91 0%, #d6b461 47%, #a7772d 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .48), inset 0 -1px rgba(72, 47, 12, .44), 0 4px 0 rgba(74, 51, 17, .38), 0 14px 28px rgba(172, 126, 43, .16);
}

.bp-button-secondary {
  color: var(--bp-gold-light);
  border: 1px solid var(--bp-line-strong);
  background: linear-gradient(145deg, rgba(45, 40, 31, .82), rgba(19, 19, 22, .94));
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
}

.bp-button:hover, .bp-button-secondary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.bp-button:active, .bp-button-secondary:active { transform: translateY(2px); }
.bp-button:disabled, .bp-button-secondary:disabled { opacity: .45; cursor: not-allowed; transform: none; }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--bp-gold-light); outline-offset: 3px; }

.bp-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid var(--bp-line);
  border-radius: 999px;
  color: var(--bp-platinum);
  background: rgba(255, 255, 255, .035);
  font-size: 12px;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}