:root {
  --ng-bg: #1B1D21;
  --ng-bg-soft: #25282E;
  --ng-bg-elevated: #2F333A;
  --ng-border: #3A3F46;
  --ng-orange: #FF7A00;
  --ng-orange-hover: #FF9A3D;
  --ng-lime: #B7FF00;
  --ng-lime-hover: #D4FF5C;
  --ng-text: #F2F4F5;
  --ng-text-soft: #C7CDD1;
  --ng-text-muted: #8B939B;
  --ng-surface-light: #F5F7F8;
  --ng-surface-light-alt: #ECEFF1;
  --ng-surface-border: #DDE3E7;
  --ng-text-dark: #2B2F36;
  --ng-text-dark-soft: #525A63;

  --bs-body-bg: var(--ng-bg);
  --bs-body-color: var(--ng-text);
  --bs-primary: var(--ng-orange);
  --bs-primary-rgb: 255, 122, 0;
  --bs-secondary-color: var(--ng-text-soft);
  --bs-border-color: var(--ng-border);
  --bs-link-color: var(--ng-orange);
  --bs-link-hover-color: var(--ng-orange-hover);
  --bs-tertiary-bg: var(--ng-bg);
  --bs-emphasis-color: var(--ng-text);

  /* Shell / SaaS rhythm (uses brand tokens) */
  --fb-radius-shell: 14px;
  --fb-ring-line: 0 0 0 1px rgba(255, 122, 0, 0.14);
  --fb-shadow-elevated: 0 22px 55px rgba(0, 0, 0, 0.38);
}

.ng-bg {
  background: var(--ng-bg) !important;
}

.ng-bg-soft {
  background: var(--ng-bg-soft) !important;
}

.ng-card {
  background: var(--ng-bg-elevated) !important;
  border: 1px solid var(--ng-border) !important;
  color: var(--ng-text) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22) !important;
}

.ng-section-light {
  background: var(--ng-surface-light) !important;
  border-color: var(--ng-surface-border) !important;
  color: var(--ng-text-dark) !important;
}

.ng-section-light-muted {
  background: var(--ng-surface-light-alt) !important;
  border-color: var(--ng-surface-border) !important;
  color: var(--ng-text-dark-soft) !important;
}

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

.ng-text-soft {
  color: var(--ng-text-soft) !important;
}

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

.ng-text-orange {
  color: var(--ng-orange) !important;
}

.ng-text-lime {
  color: var(--ng-lime) !important;
}

/* Primary CTA — same token stack as .btn-ng-orange (HTML uses .btn-ng-primary across modals + Premium). */
.btn-ng-orange,
.btn-ng-primary {
  --bs-btn-color: #17191c;
  --bs-btn-bg: var(--ng-orange);
  --bs-btn-border-color: var(--ng-orange);
  --bs-btn-hover-color: #17191c;
  --bs-btn-hover-bg: var(--ng-orange-hover);
  --bs-btn-hover-border-color: var(--ng-orange-hover);
  --bs-btn-active-color: #17191c;
  --bs-btn-active-bg: var(--ng-orange-hover);
  --bs-btn-active-border-color: var(--ng-orange-hover);
  box-shadow: 0 0 0 rgba(255, 122, 0, 0);
}

.btn-ng-orange:hover,
.btn-ng-primary:hover {
  box-shadow: 0 0 24px rgba(255, 122, 0, 0.24);
}

.btn-ng-lime {
  --bs-btn-color: #17191c;
  --bs-btn-bg: var(--ng-lime);
  --bs-btn-border-color: var(--ng-lime);
  --bs-btn-hover-color: #17191c;
  --bs-btn-hover-bg: var(--ng-lime-hover);
  --bs-btn-hover-border-color: var(--ng-lime-hover);
  --bs-btn-active-color: #17191c;
  --bs-btn-active-bg: var(--ng-lime-hover);
  --bs-btn-active-border-color: var(--ng-lime-hover);
}

.btn-ng-lime:hover {
  box-shadow: 0 0 24px rgba(183, 255, 0, 0.22);
}

.btn-outline-ng-orange {
  --bs-btn-color: var(--ng-orange);
  --bs-btn-border-color: var(--ng-orange);
  --bs-btn-hover-color: #17191c;
  --bs-btn-hover-bg: var(--ng-orange);
  --bs-btn-hover-border-color: var(--ng-orange);
  --bs-btn-active-color: #17191c;
  --bs-btn-active-bg: var(--ng-orange-hover);
  --bs-btn-active-border-color: var(--ng-orange-hover);
}

.btn-outline-ng-lime {
  --bs-btn-color: var(--ng-lime);
  --bs-btn-border-color: var(--ng-lime);
  --bs-btn-hover-color: #17191c;
  --bs-btn-hover-bg: var(--ng-lime);
  --bs-btn-hover-border-color: var(--ng-lime);
  --bs-btn-active-color: #17191c;
  --bs-btn-active-bg: var(--ng-lime-hover);
  --bs-btn-active-border-color: var(--ng-lime-hover);
}

.badge-ng-orange {
  background: rgba(255, 122, 0, 0.16) !important;
  border: 1px solid rgba(255, 122, 0, 0.35);
  color: var(--ng-orange) !important;
}

.badge-ng-lime {
  background: rgba(183, 255, 0, 0.14) !important;
  border: 1px solid rgba(183, 255, 0, 0.32);
  color: var(--ng-lime) !important;
}

.navbar-ng {
  background: rgba(27, 29, 33, 0.96) !important;
  border-bottom: 1px solid var(--ng-border) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(12px);
}

.navbar-ng .navbar-brand,
.navbar-ng .nav-link {
  color: var(--ng-text-soft) !important;
}

.navbar-ng .navbar-brand:hover,
.navbar-ng .nav-link:hover,
.navbar-ng .nav-link.is-active {
  color: var(--ng-orange) !important;
}

.navbar-ng .navbar-toggler {
  border-color: var(--ng-border);
}

.navbar-ng .navbar-toggler-icon {
  filter: invert(1) grayscale(1);
}

.table-ng {
  --bs-table-bg: var(--ng-bg-soft);
  --bs-table-color: var(--ng-text);
  --bs-table-border-color: var(--ng-border);
  --bs-table-striped-bg: var(--ng-bg-elevated);
  --bs-table-striped-color: var(--ng-text);
  --bs-table-hover-bg: rgba(255, 122, 0, 0.1);
  --bs-table-hover-color: var(--ng-text);
}

.ng-glow-orange {
  box-shadow: 0 0 26px rgba(255, 122, 0, 0.22) !important;
}

.ng-glow-lime {
  box-shadow: 0 0 26px rgba(183, 255, 0, 0.2) !important;
}

.ng-accent-border-orange {
  border-left: 4px solid var(--ng-orange) !important;
}

.ng-accent-border-lime {
  border-left: 4px solid var(--ng-lime) !important;
}