/* Intrafire Studios – Studio Minimal Theme
   Loaded AFTER css/styles.css to override Bootstrap defaults.
*/

:root {
  color-scheme: dark;

  /* Core surfaces */
  --if-bg: #0b0f14;
  --if-surface: #0f1722;
  --if-surface-2: #121d2b;

  /* Borders & shadows */
  --if-border: rgba(255, 255, 255, 0.09);
  --if-border-strong: rgba(255, 255, 255, 0.14);
  --if-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);

  /* Text */
  --if-text: rgba(255, 255, 255, 0.92);
  --if-text-muted: rgba(255, 255, 255, 0.62);
  --if-text-subtle: rgba(255, 255, 255, 0.78);

  /* Accent */
  --if-accent: #4fd2e6;
  --if-accent-2: #86f0ff;
  --if-accent-contrast: #071115;

  /* Focus ring */
  --if-focus: 0 0 0 0.25rem rgba(79, 210, 230, 0.22);
}

/* Base */
html,
body {
  background: radial-gradient(120% 140% at 20% 0%, rgba(79, 210, 230, 0.06), transparent 45%),
    radial-gradient(90% 120% at 100% 0%, rgba(134, 240, 255, 0.04), transparent 50%),
    var(--if-bg);
  color: var(--if-text);
}

a {
  color: var(--if-accent);
  text-decoration-color: rgba(79, 210, 230, 0.45);
}
a:hover {
  color: var(--if-accent-2);
  text-decoration-color: rgba(134, 240, 255, 0.65);
}

.text-muted {
  color: var(--if-text-muted) !important;
}

/* Shared dark section background */
.bg-dark {
  background-color: var(--if-surface) !important;
}

/* Cards */
.card {
  border-color: var(--if-border);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.card.bg-dark {
  background-color: var(--if-surface-2) !important;
  border: 1px solid var(--if-border);
  box-shadow: var(--if-shadow);
}
.card-header.bg-transparent,
.card-footer.bg-transparent {
  border-color: var(--if-border);
}

/* Navbar */
.navbar-dark .navbar-brand,
.navbar-dark .nav-link {
  color: var(--if-text-subtle) !important;
}
.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus {
  color: var(--if-text) !important;
}

/* Dropdown */
.dropdown-menu-dark {
  background-color: var(--if-surface-2);
  border: 1px solid var(--if-border);
}
.dropdown-menu-dark .dropdown-item {
  color: var(--if-text-subtle);
}
.dropdown-menu-dark .dropdown-item:hover,
.dropdown-menu-dark .dropdown-item:focus {
  color: var(--if-text);
  background-color: rgba(79, 210, 230, 0.10);
}

/* Buttons */
.btn-primary {
  background-color: var(--if-accent);
  border-color: rgba(79, 210, 230, 0.55);
  color: var(--if-accent-contrast);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--if-accent-2);
  border-color: rgba(134, 240, 255, 0.75);
  color: var(--if-accent-contrast);
}

.btn-outline-primary {
  color: var(--if-accent);
  border-color: rgba(79, 210, 230, 0.55);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: rgba(79, 210, 230, 0.14);
  border-color: rgba(134, 240, 255, 0.75);
  color: var(--if-accent-2);
}

.btn-secondary {
  background-color: rgba(255, 255, 255, 0.10);
  border-color: var(--if-border-strong);
  color: var(--if-text);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.20);
  color: var(--if-text);
}

.btn-light {
  background-color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.18);
  color: #0b0f14;
}
.btn-light:hover,
.btn-light:focus {
  background-color: rgba(255, 255, 255, 0.98);
  border-color: rgba(255, 255, 255, 0.28);
  color: #0b0f14;
}

.btn:focus,
.btn:focus-visible {
  box-shadow: var(--if-focus);
}

/* Badges: keep Bootstrap semantics, gently unify */
.badge.bg-success {
  background-color: rgba(46, 204, 113, 0.16) !important;
  border: 1px solid rgba(46, 204, 113, 0.30);
  color: rgba(255, 255, 255, 0.92);
}
.badge.bg-info {
  background-color: rgba(79, 210, 230, 0.16) !important;
  border: 1px solid rgba(79, 210, 230, 0.30);
  color: rgba(255, 255, 255, 0.92) !important;
}
.badge.bg-secondary {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
}

/* Forms */
.form-control,
.form-select {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: var(--if-border);
  color: var(--if-text);
}
.form-control::placeholder {
  color: rgba(255, 255, 255, 0.52);
}
.form-control:focus,
.form-select:focus {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(79, 210, 230, 0.60);
  box-shadow: var(--if-focus);
  color: var(--if-text);
}

/* List group items that are intended to be transparent on dark cards */
.list-group-item.bg-transparent {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Feature icon bubble */
.feature.bg-primary {
  background-color: rgba(79, 210, 230, 0.22) !important;
  border: 1px solid rgba(79, 210, 230, 0.25);
}

/* Hero banner (homepage) */
.hero-banner {
  position: relative;
  overflow: hidden;
  background: var(--if-surface) url("../images/banner.png") center/cover no-repeat;
}
.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  border-radius: inherit;
  pointer-events: none;
}
.hero-banner > * {
  position: relative;
  z-index: 1;
}

/* Product page heroes share the same readable overlay + spacing */
header[class^="if-hero-"],
header[class*=" if-hero-"] {
  position: relative;
  color: var(--if-text);
}
header[class^="if-hero-"]::before,
header[class*=" if-hero-"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
}
header[class^="if-hero-"] > .container,
header[class*=" if-hero-"] > .container {
  position: relative;
  z-index: 2;
  padding-top: 6rem;
  padding-bottom: 6rem;
  text-align: center;
}