/* ============================================================
   BACK9OPS BRAND UTILITIES
   Reusable single-purpose classes built on design tokens.
   These are the building blocks for all page and component
   authors. Do not add component-specific layout here.
   ============================================================ */


/* ── Text color ─────────────────────────────────────────────── */
.b9-text           { color: var(--b9-text) !important; }
.b9-text-muted     { color: var(--b9-text-muted) !important; }
.b9-text-soft      { color: var(--b9-text-soft) !important; }
.b9-text-primary   { color: var(--b9-primary-text) !important; }
.b9-text-success   { color: var(--b9-success) !important; }
.b9-text-warning   { color: var(--b9-warning) !important; }
.b9-text-danger    { color: var(--b9-danger) !important; }
.b9-text-info      { color: var(--b9-info-text) !important; }
.b9-text-green     { color: var(--b9-accent-green-text) !important; }
.b9-text-on-dark   { color: var(--b9-text-on-dark) !important; }


/* ── Background ─────────────────────────────────────────────── */
.b9-bg-surface      { background-color: var(--b9-surface) !important; }
.b9-bg-surface-alt  { background-color: var(--b9-surface-alt) !important; }
.b9-bg-surface-muted{ background-color: var(--b9-surface-muted) !important; }
.b9-bg-primary      { background-color: var(--b9-primary) !important; color: var(--b9-text-on-dark) !important; }
.b9-bg-primary-soft { background-color: var(--b9-primary-soft) !important; }
.b9-bg-success-soft { background-color: var(--b9-success-soft) !important; }
.b9-bg-warning-soft { background-color: var(--b9-warning-soft) !important; }
.b9-bg-danger-soft  { background-color: var(--b9-danger-soft) !important; }
.b9-bg-info-soft    { background-color: var(--b9-info-soft) !important; }
.b9-bg-green-soft   { background-color: var(--b9-accent-green-soft) !important; }
.b9-bg-dark         { background-color: var(--b9-dark-surface) !important; }


/* ── Border color ───────────────────────────────────────────── */
.b9-border          { border-color: var(--b9-border) !important; }
.b9-border-strong   { border-color: var(--b9-border-strong) !important; }
.b9-border-primary  { border-color: var(--b9-primary) !important; }
.b9-border-success  { border-color: var(--b9-success) !important; }
.b9-border-warning  { border-color: var(--b9-warning) !important; }
.b9-border-danger   { border-color: var(--b9-danger) !important; }


/* ── Surfaces ───────────────────────────────────────────────── */
.b9-surface-card {
  background:    var(--b9-card-bg);
  border:        1.5px solid var(--b9-card-border);
  border-radius: var(--b9-card-radius);
  box-shadow:    var(--b9-card-shadow);
}

.b9-surface-card-md {
  background:    var(--b9-card-bg);
  border:        1.5px solid var(--b9-card-border);
  border-radius: var(--b9-card-radius);
  box-shadow:    var(--b9-card-shadow-md);
}

.b9-surface-panel {
  background:    var(--b9-surface-muted);
  border:        1px solid var(--b9-border);
  border-radius: var(--b9-card-radius);
}

.b9-surface-inset {
  background:    var(--b9-surface);
  border:        1px solid var(--b9-border);
  border-radius: 8px;
}

/* Status left-border accent panels */
.b9-panel-success { border-left: 4px solid var(--b9-success); }
.b9-panel-warning { border-left: 4px solid var(--b9-warning); }
.b9-panel-danger  { border-left: 4px solid var(--b9-danger); }
.b9-panel-info    { border-left: 4px solid var(--b9-info); }
.b9-panel-primary { border-left: 4px solid var(--b9-primary); }


/* ── Status badges / chips ──────────────────────────────────── */
.b9-badge {
  display:         inline-flex;
  align-items:     center;
  gap:             0.3rem;
  font-size:       0.72rem;
  font-weight:     700;
  padding:         3px 10px;
  border-radius:   var(--b9-badge-radius);
  white-space:     nowrap;
  letter-spacing:  0.02em;
}

.b9-status-neutral {
  background: var(--b9-badge-neutral-bg);
  color:      var(--b9-badge-neutral-text);
}

.b9-status-primary {
  background: var(--b9-primary-soft);
  color:      var(--b9-primary-text);
}

.b9-status-success {
  background: var(--b9-success-soft);
  color:      var(--b9-success-text);
}

.b9-status-warning {
  background: var(--b9-warning-soft);
  color:      var(--b9-warning-text);
}

.b9-status-danger {
  background: var(--b9-danger-soft);
  color:      var(--b9-danger-text);
}

.b9-status-info {
  background: var(--b9-info-soft);
  color:      var(--b9-info-text);
}

.b9-status-green {
  background: var(--b9-accent-green-soft);
  color:      var(--b9-accent-green-text);
}


/* ── Buttons ────────────────────────────────────────────────── */
.b9-brand-button-primary {
  display:          inline-flex;
  align-items:      center;
  gap:              0.45rem;
  background:       var(--b9-primary);
  color:            #fff;
  font-weight:      600;
  font-size:        0.875rem;
  padding:          0.5rem 1.15rem;
  border-radius:    8px;
  border:           none;
  cursor:           pointer;
  text-decoration:  none;
  transition:       background 0.13s, box-shadow 0.13s, transform 0.1s;
  white-space:      nowrap;
}

.b9-brand-button-primary:hover {
  background:  var(--b9-primary-hover);
  color:       #fff;
  box-shadow:  0 4px 12px rgba(30,64,175,0.25);
  transform:   translateY(-1px);
}

.b9-brand-button-primary:active {
  background:  var(--b9-primary-active);
  transform:   translateY(0);
  box-shadow:  none;
}

.b9-brand-button-primary:focus-visible {
  outline:    none;
  box-shadow: var(--b9-focus-ring);
}

.b9-brand-button-secondary {
  display:         inline-flex;
  align-items:     center;
  gap:             0.45rem;
  background:      var(--b9-surface-alt);
  color:           var(--b9-primary-text);
  font-weight:     600;
  font-size:       0.875rem;
  padding:         0.5rem 1.15rem;
  border-radius:   8px;
  border:          1.5px solid var(--b9-border-strong);
  cursor:          pointer;
  text-decoration: none;
  transition:      background 0.13s, border-color 0.13s;
  white-space:     nowrap;
}

.b9-brand-button-secondary:hover {
  background:   var(--b9-primary-soft);
  border-color: var(--b9-primary);
  color:        var(--b9-primary-text);
}

.b9-brand-button-secondary:focus-visible {
  outline:    none;
  box-shadow: var(--b9-focus-ring);
}

.b9-brand-button-ghost {
  display:         inline-flex;
  align-items:     center;
  gap:             0.45rem;
  background:      transparent;
  color:           var(--b9-text-muted);
  font-weight:     500;
  font-size:       0.875rem;
  padding:         0.45rem 0.9rem;
  border-radius:   8px;
  border:          1px solid transparent;
  cursor:          pointer;
  text-decoration: none;
  transition:      background 0.13s, color 0.13s;
}

.b9-brand-button-ghost:hover {
  background: var(--b9-surface-muted);
  color:      var(--b9-text);
}


/* ── Links ──────────────────────────────────────────────────── */
.b9-brand-link {
  color:           var(--b9-link);
  text-decoration: none;
  font-weight:     500;
  transition:      color 0.12s;
}

.b9-brand-link:hover {
  color:           var(--b9-link-hover);
  text-decoration: underline;
}

.b9-brand-link:focus-visible {
  outline:      none;
  border-radius: 4px;
  box-shadow:   var(--b9-focus-ring);
}


/* ── Focus ring ─────────────────────────────────────────────── */
.b9-focus:focus-visible,
.b9-focus-ring:focus-visible {
  outline:      none;
  box-shadow:   var(--b9-focus-ring);
  border-radius: 6px;
}


/* ── Shadows ────────────────────────────────────────────────── */
.b9-shadow-sm { box-shadow: var(--b9-card-shadow) !important; }
.b9-shadow-md { box-shadow: var(--b9-card-shadow-md) !important; }
.b9-shadow-none { box-shadow: none !important; }


/* ── Dividers ───────────────────────────────────────────────── */
.b9-divider {
  height:     1px;
  background: var(--b9-border);
  border:     none;
  margin:     0;
}

.b9-divider-dark {
  height:     1px;
  background: var(--b9-dark-border-subtle);
  border:     none;
  margin:     0;
}