@import url("../tokens.css");

/* AI Fashion Hub local variable bridge.
   Existing module CSS keeps geometry and mode-specific behavior, while shared chrome
   resolves through the canonical design-system palette. */

.fashion-hub{
  --fh-bg:var(--aidc-bg-page);
  --fh-surface:var(--aidc-bg-card);
  --fh-surface-hover:var(--aidc-btn-secondary-bg-hover);
  --fh-surface-active:var(--aidc-bg-elevated);
  --fh-border:var(--aidc-border-subtle);
  --fh-border-hover:var(--aidc-border-strong);
  --fh-border-active:color-mix(in srgb,var(--aidc-action-primary-from) 40%,transparent);
  --fh-text:var(--aidc-text-primary);
  --fh-text-muted:var(--aidc-text-secondary);
  --fh-text-dim:var(--aidc-text-muted);
  --fh-pink:var(--aidc-action-primary-from);
  --fh-pink-glow:var(--aidc-action-primary-glow);
  --fh-blue:var(--aidc-cyan-500);
  --fh-green:var(--aidc-green-500);
  --fh-green-glow:color-mix(in srgb,var(--aidc-green-500) 25%,transparent);
  --fh-gradient:linear-gradient(135deg,var(--aidc-action-primary-from),var(--aidc-action-primary-to));
  --fh-radius:var(--aidc-radius-dialog);
  --fh-radius-sm:var(--aidc-radius-control);
  --fh-radius-xs:var(--aidc-radius-button)
}

.fashion-hub .fashion-nav__tab--active{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent)!important;
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 38%,transparent)!important;
  color:var(--aidc-text-primary)!important;
  box-shadow:none!important
}

.fashion-hub .fashion-nav__tab--active .fashion-nav__tab-badge{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 14%,transparent)!important;
  color:var(--aidc-action-primary-from)!important
}

.fashion-hub .fh-history__list{
  scrollbar-color:var(--aidc-border-default) transparent!important
}

.fashion-hub .fh-history__list::-webkit-scrollbar-thumb{
  background:var(--aidc-border-default)!important
}

.fashion-hub .fh-history__list::-webkit-scrollbar-thumb:hover{
  background:var(--aidc-border-strong)!important
}

.fashion-hub .fh-history-item__status--done{background:var(--aidc-green-500)!important}
.fashion-hub .fh-history-item__status--pending{background:var(--aidc-amber-500)!important}
.fashion-hub .fh-history-item__status--failed{background:var(--aidc-red-500)!important}