@import url("../shared/template-base.css");

:root {
  --color-bg: #0d1012;
  --color-bg-soft: #171b1f;
  --color-card: rgba(255, 255, 255, 0.07);
  --color-text: #f5f7f8;
  --color-muted: #aab3b8;
  --color-primary: #ffb000;
  --color-secondary: #e23d2b;
  --hero-image: url("https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=1800&q=80");
}

.hero::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.24)),
    var(--hero-image) center/cover no-repeat;
}

.card-icon {
  border-radius: 8px;
}