:root {
  --bl-font-ui: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bl-font-display: "Avenir Next", "SF Pro Display", "Segoe UI", sans-serif;

  --bl-bg-base: #050506;
  --bl-bg-elevated: rgba(16, 18, 24, 0.88);
  --bl-bg-panel: rgba(18, 20, 28, 0.9);
  --bl-bg-panel-soft: rgba(255, 255, 255, 0.04);
  --bl-bg-panel-strong: linear-gradient(165deg, rgba(24, 26, 33, 0.94), rgba(10, 12, 18, 0.92));
  --bl-bg-overlay: rgba(4, 5, 8, 0.76);

  --bl-text: #f2f4fb;
  --bl-text-soft: rgba(242, 244, 251, 0.86);
  --bl-text-muted: rgba(191, 198, 214, 0.72);
  --bl-text-dark: #16110a;

  --bl-line: rgba(255, 255, 255, 0.08);
  --bl-line-strong: rgba(255, 255, 255, 0.14);
  --bl-line-focus: rgba(122, 182, 255, 0.56);

  --bl-accent-blue: #61a7ff;
  --bl-accent-green: #3cdc88;
  --bl-accent-red: #ff6676;
  --bl-accent-gold: #ffd449;
  --bl-accent-gold-soft: #ffe58d;

  --bl-radius-sm: 10px;
  --bl-radius-md: 14px;
  --bl-radius-lg: 18px;
  --bl-radius-xl: 24px;
  --bl-radius-2xl: 30px;
  --bl-radius-pill: 999px;

  --bl-shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.28);
  --bl-shadow-md: 0 16px 36px rgba(0, 0, 0, 0.36);
  --bl-shadow-lg: 0 28px 56px rgba(0, 0, 0, 0.5);
  --bl-shadow-gold: 0 0 52px rgba(255, 216, 88, 0.34);
  --bl-shadow-hover-sm: 0 16px 30px rgba(0, 0, 0, 0.36);
  --bl-shadow-hover-md: 0 24px 44px rgba(0, 0, 0, 0.42);
  --bl-shadow-hover-lg: 0 34px 64px rgba(0, 0, 0, 0.56);

  --bl-space-1: 4px;
  --bl-space-2: 8px;
  --bl-space-3: 12px;
  --bl-space-4: 16px;
  --bl-space-5: 20px;
  --bl-space-6: 24px;
  --bl-space-7: 32px;
  --bl-space-8: 40px;

  --bl-text-xs: 0.78rem;
  --bl-text-sm: 0.9rem;
  --bl-text-md: 1rem;
  --bl-text-lg: 1.18rem;
  --bl-text-xl: 1.48rem;
  --bl-text-hero: clamp(1.9rem, 3.6vw, 3.4rem);

  --bl-button-height-sm: 40px;
  --bl-button-height-md: 46px;
  --bl-button-height-lg: 54px;
  --bl-motion-fast: 140ms;
  --bl-motion-base: 200ms;
  --bl-motion-slow: 280ms;
  --bl-motion-loader: 240ms;
  --bl-motion-intro: 520ms;
  --bl-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --bl-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bl-ease-intro: cubic-bezier(0.22, 1, 0.36, 1);
  --bl-intro-lift: 18px;
  --bl-hover-lift-sm: translateY(-1px);
  --bl-hover-lift-md: translateY(-2px);
  --bl-hover-press: translateY(0) scale(0.985);
  --bl-hover-brightness: 1.06;
  --bl-hover-brightness-strong: 1.1;

  --bl-card-backdrop:
    radial-gradient(1200px 600px at 20% -20%, rgba(120, 160, 255, 0.08), transparent 72%),
    radial-gradient(900px 500px at 100% 120%, rgba(255, 193, 77, 0.08), transparent 75%),
    var(--bl-bg-base);
}

html,
body {
  font-family: var(--bl-font-ui);
  color: var(--bl-text);
}

button,
input,
textarea,
select {
  font-family: inherit;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--bl-line-focus);
  outline-offset: 3px;
}