/* =================================================================
   OMDA Auto — PRODUCT TOKENS ONLY
   No component styling. No layout. No borders. No shadows.
   Visual/design ownership belongs exclusively to OMDA Shell v2.1.
================================================================= */

:root,
html[data-mode="dark"],
:root[data-mode="dark"] {
  --product-accent:   #a08858;
  --product-accent-2: #c4ab78;
  --product-rgb:      160, 136, 88;

  --a:       var(--product-accent);
  --a-2:     var(--product-accent-2);
  --a-rgb:   var(--product-rgb);
  --a-bg:    rgba(var(--product-rgb), .13);
  --a-soft:  rgba(var(--product-rgb), .22);
  --ring:    rgba(var(--product-rgb), .28);
  --a-ink:   #1c1608;
  --a-text:  color-mix(in srgb, var(--a), var(--text) 18%);

  --accent:     var(--a);
  --accent2:    var(--a-2);
  --accent-rgb: var(--a-rgb);
  --surface2:   var(--card);
  --surface3:   var(--card-hi);
  --muted:      var(--text-2);
  --subtle:     var(--text-3);
  --border:     var(--line);
  --border2:    var(--line-2);
  --green:      var(--ok);
  --red:        var(--bad);
  --blue:       var(--info);
  --purple:     #a78bfa;
  --r:          var(--radius);
}

html[data-mode="light"],
:root[data-mode="light"] {
  --a-bg:    rgba(var(--product-rgb), .14);
  --a-soft:  rgba(var(--product-rgb), .24);
  --ring:    rgba(var(--product-rgb), .28);
  --a-ink:   #1c1608;
  --a-text:  color-mix(in srgb, var(--a), var(--text) 18%);
}


/* Terminal manager connection and pairing controls */
html[data-mode="dark"]
.badge.omda-terminal-connection-offline,
:root:not([data-mode="light"])
.badge.omda-terminal-connection-offline {
  background:
    color-mix(
      in srgb,
      var(--text-2, #9aa8c0) 14%,
      transparent
    );
  border-color:
    color-mix(
      in srgb,
      var(--text-2, #9aa8c0) 34%,
      transparent
    );
  color: var(--text-2, #9aa8c0);
}

html[data-mode="light"]
.badge.omda-terminal-connection-offline {
  background: #eef1f5;
  border-color: var(--line-2, #d4dbe6);
  color: #526176;
}

html[data-mode="light"]
.badge.omda-terminal-connection-offline::before {
  background: #66758a;
}

/* Light topbar contrast refinement */
html[data-mode="light"] #topbar :is(
  .tb-mob,
  .tb-ico,
  .tb-icon-btn,
  .tb-action,
  .tb-mobile-search
) {
  background: rgba(255, 255, 255, .92);
  border-color: var(--line-2, #d4dbe6);
  color: var(--text, #0f1b2d);
  box-shadow:
    0 1px 2px rgba(15, 27, 45, .06);
}

html[data-mode="light"] #topbar :is(
  .tb-mob,
  .tb-ico,
  .tb-icon-btn,
  .tb-action,
  .tb-mobile-search
) svg {
  color: currentColor;
  opacity: .94;
}

html[data-mode="light"] #topbar :is(
  .tb-mob,
  .tb-ico,
  .tb-icon-btn,
  .tb-action,
  .tb-mobile-search
):hover {
  background: var(--card-hi, #f7f9fc);
  border-color:
    color-mix(
      in srgb,
      var(--text-2, #51617a) 34%,
      var(--line-2, #d4dbe6)
    );
  color: var(--text, #0f1b2d);
}

html[data-mode="light"] #topbar :is(
  .tb-mob,
  .tb-ico,
  .tb-icon-btn,
  .tb-action,
  .tb-mobile-search
):focus-visible {
  outline: 3px solid
    rgba(var(--product-rgb), .24);
  outline-offset: 2px;
  border-color:
    rgba(var(--product-rgb), .46);
}

html[data-mode="light"] #topbar :is(
  .tb-user-pill,
  .tb-pill
) {
  background: rgba(255, 255, 255, .88);
  border-color: var(--line-2, #d4dbe6);
  color: var(--text, #0f1b2d);
}

html[data-mode="light"] #topbar :is(
  .tb-user-pill,
  .tb-pill
):hover {
  background: var(--card-hi, #f7f9fc);
  border-color:
    color-mix(
      in srgb,
      var(--text-2, #51617a) 30%,
      var(--line-2, #d4dbe6)
    );
}


/* Team Shell action interaction refinement */
#topbar .tb-mob:hover,
#topbar .tb-ico:hover,
#topbar .tb-icon-btn:hover,
#topbar .tb-action:hover,
#topbar .tb-user-pill:hover,
#topbar .tb-pill:hover {
  border-color: var(--line-2);
  background: var(--surface);
  transform: translateY(-1px);
}

#topbar .tb-mob:active,
#topbar .tb-ico:active,
#topbar .tb-icon-btn:active,
#topbar .tb-action:active,
#topbar .tb-user-pill:active,
#topbar .tb-pill:active {
  transform: translateY(0);
}

#topbar .tb-mob:focus-visible,
#topbar .tb-ico:focus-visible,
#topbar .tb-icon-btn:focus-visible,
#topbar .tb-action:focus-visible,
#topbar .tb-user-pill:focus-visible,
#topbar .tb-pill:focus-visible {
  outline: none;
  border-color: var(--omda-accent, #a08858);
  box-shadow: 0 0 0 3px rgba(160, 136, 88, 0.18);
}